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

错误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（组）中，其中包含您案例中的完整图表，即variable svg。

错误2：

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

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

工作示例here

希望这有帮助！

d3缩放不像示例那样工作

1 个答案: