Question

我对阻止复位的方法感到困惑。在resetZoom()函数运行之后，直到我平移svg，然后它恢复原点，之后什么都没有发生。为什么会发生这种情况的任何想法？

var svg = d3.select("div#nodegraph")
                    .append("svg")
                        .attr("width", "100%")
                        .attr("height", "100%")
                        .call(d3.zoom()
                                .scaleExtent([0.25, 5])
                                .on("zoom", function() {
                                    root.attr('transform', d3.event.transform)
                                })
                        );


var root = svg.append('g');


root.append('circle')
                .attr("cx", 10)
                .attr("cy", 10)
                .attr("r", 10)
                .attr("fill", "red");


var resetZoom = function() {
    var zoom = d3.zoom();
    svg.call(zoom.transform, d3.zoomIdentity);
}

document.getElementById("resetZoomButton").onclick = resetZoom;

Answer 1

与其在resetZoom内创建另一个缩放行为，不如使用传递选择的对象。首先，声明它：

const zoom = d3.zoom()
  .scaleExtent([0.25, 5])
  .on("zoom", function() {
    root.attr('transform', d3.event.transform)
  });

然后：

var svg = d3.select("div#nodegraph")
  .call(zoom);

var resetZoom = function() {
  svg.call(zoom.transform, d3.zoomIdentity);
}

这是您所做的更改的代码：

const zoom = d3.zoom()
  .scaleExtent([0.25, 5])
  .on("zoom", function() {
    root.attr('transform', d3.event.transform)
  });

var svg = d3.select("div#nodegraph")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .call(zoom);

var root = svg.append('g');

root.append('circle').attr("cx", 10).attr("cy", 10).attr("r", 10).attr("fill", "red");

var resetZoom = function() {
  svg.call(zoom.transform, d3.zoomIdentity);
}

document.getElementById("resetZoomButton").onclick = resetZoom;

#nodegraph {
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="nodegraph">
</div>
<button id="resetZoomButton" onClick="resetZoom()">RESET</button>

关于您的问题...

为什么会发生这种情况？

...之所以发生这种情况，是因为仅call内部的缩放行为使on侦听器发生了某些变化。

重设缩放：仅在平移时更新？

1 个答案: