2

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

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

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

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

4

2 に答える 2

9

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 + ")");
}
于 2012-04-04T21:36:12.623 に答える
1 
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 +"） "）;

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

于 2014-09-05T11:00:54.537 に答える