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

Question

我主要基于 these really helpful examples 构建了 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 + ")");
}

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

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 + ")");
}

只是将其放在这里，以防其他人犯同样的错误!