更改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 +“）”）;

绝对规模你卡恩使用此代码 这将是有益的地图缩放和平移的