有没有办法放大 D3 力布局图？

D3 具有力导向布局here。有没有办法给这个图添加缩放功能？目前，我能够捕获鼠标滚轮事件，但不太确定如何编写重绘函数本身。有什么建议么？

var vis = d3.select("#graph")
  .append("svg:svg")
  .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function
  .attr("width", w)
  .attr("height", h);

2014 年 6 月 4 日更新

也可以看看迈克博斯托克的答案在这里D3 v.3 中的更改和相关例子。我认为这可能会取代下面的答案。

更新 2/18/2014

我认为如果您希望整个 SVG 进行平移和缩放，@ahaarnos 的答案更可取。嵌套的g只有在同一个 SVG 中有非缩放元素时（不是原始问题中的情况），我下面的答案中的元素才是真正必要的。如果你do将行为应用到g元素，然后是背景rect或类似的元素需要确保g接收指针事件。

原答案

我得到这个工作基于缩放-平移-变换示例 - 你可以在这里看到我的 jsFiddle：http://jsfiddle.net/nrabinowitz/QMKm3/

这比我希望的要复杂一点——你必须嵌套几个g要使其正常工作，请设置 SVG 的pointer-events归因于all，然后附加一个背景矩形来接收指针事件（否则仅当指针位于节点或链接上方时才有效）。这redraw功能比较简单，就是在最里面设置一个transformg:

var vis = d3.select("#chart")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all")
  .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
  .append('svg:g');

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'white');

function redraw() {
  console.log("here", d3.event.translate, d3.event.scale);
  vis.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

这有效地缩放了整个 SVG，因此它也缩放了笔划宽度，就像放大图像一样。

还有另一种example这说明了类似的技术。