d3缩放不像示例那样工作

Question

我正在尝试使用缩放功能来使用我的d3网络(根据此处),但我没有复制行为.我首先创建zoom变量:

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

但是,网络不允许我通过单击节点或缩放来缩放.如果需要,我附上完整的文件.

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

最好,

本

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

这里的工作示例

希望这可以帮助!