javascript - d3 zoom 无法像示例中那样工作

Question

我正在尝试让缩放功能与我的 d3 网络一起使用(根据 here )，但我没有复制该行为。我首先创建缩放变量:

 var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);

然后我创建 svg:

 var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
.call(zoom);

最后是函数本身:

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

但是，网络不允许我通过单击节点或缩放来缩放。我附上完整的 file如果也需要的话。

有谁知道为什么我没有得到这种行为？

最好的，

本

Answer 1

错误一

你正在做:

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

你应该做的

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

翻译/缩放应该发生在 g DOM(group) 上的原因，它在您的情况下包含完整的图形，即 variable svg。

错误 2:

在 SVG 的整个长度和宽度上附加一个矩形以捕获缩放事件。

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

工作示例 here

希望这对您有所帮助!