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

Question

私は自分自身のデータからd3-based force-directed network graphを構築していますa test siteを持っています。

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

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

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

Answer 1

D3ではズームを使用することができ、実装はかなり簡単です。グラフを「ビューポート」と呼ばれる「g」要素の中にラップするだけで済みます。

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

次の関数：：ズーム機能で次のコード svg.attr（ "変換" を書く

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要素のズームイベントに割り当てます（ "+ -x +"、 "+ -y +"） "）;"（ "+ w/2 +"、 "+ h/2 +"絶対的な規模のため

あなたはキャン使用このコード これはの