D3 力图未按预期平移或缩放

Question

构建了一个 D3 力图

我想添加平移和缩放功能，我尝试使用另一个示例（看起来我只能包含两个链接，但 Google "d3 force zoom eyaler" 找到它）。

不幸的是，当我缩小一个大于初始 SVG 的图表时，我得到了这样的结果：

Result of dragging and dropping

相关代码如下：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));

function redraw() {
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

如何更改平移和缩放行为，使其滚动并能够看到图表的其余部分，而不是仅仅让我移动最初可见的方块？

Answer 1

好的，看来我已经解决了...您需要对 <g> 而不是 SVG 本身执行转换。所以：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));

var g = svg.append("g"); // add <g>

function redraw() {
  g.attr("transform",    // perform transform on g, not svg
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

只是把它放在这里以防其他人犯同样的错误！

D3 力图未按预期平移或缩放

D3 force graph doesn't pan or zoom as expected

javascript

svg

d3.js

force-layout