javascript - d3 SVGキャンバスのズームレベルを変更しますか？

Question

自分のデータからd3ベースの力指向ネットワークグラフを作成しているテストサイトがあります。

約5つまたは6つの遺伝子を選択すると、グラフのノードがキャンバスの外側に描画され始めます。

ノードがキャンバスの端から消えないように、ズームレベルを制御するためにd3 APIのどの部分を呼び出す必要がありますか？

可能であれば、実装がかなり単純でない限り、概念を簡単に説明するコードスニペットをいただければ幸いです。アドバイスありがとうございます。

Answer 1

D3ではズームを使用でき、実装はかなり簡単です。グラフを「ビューポート」と呼ぶ「g」要素でラップするだけで済みます。次に、svg要素のズームイベントに割り当てます。

svg.call(d3.behavior.zoom().on("zoom", redraw))

次の関数：

function redraw() {
    d3.select("#viewport").attr("transform",
        "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
}

Answer 2

var x, y, k;
            if (d && centered !== d) {
                var centroid = path.centroid(d);
                x = centroid[0];
                y = centroid[1];
                k = 4;
                centered = d;
            } else {
                x = w / 2;
                y = h / 2;
                k = 1;
                centered = null;
            }

ズーム関数に次のコードを記述しますsvg.attr（ "transform"、 "translate（" + w / 2 + "、" + h / 2 + "）scale（" + k + "）translate（" + -x + " 、"+ -y +"） "）;

絶対尺度の場合、このコードを使用することはできません。これは、マップのズームとパンに役立ちます。