更改d3 SVG畫布的縮放級別？

Question

我有a test site我從我自己的數據構建d3-based force-directed network graph。

如果我選擇大約五六個基因，我的圖中的節點開始在畫布外繪製。

我需要調用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（ 「改造」 ，「translate（」+ w/2 +「，」+ h/2 +「）標尺（」+ k +「）translate（」+ -x +「，」+ -y +「）」）;

絕對規模你卡恩使用此代碼 這將是有益的地圖縮放和平移的