javascript - 重置缩放 : only updates on pan?

Question

我对这里阻止重置的原因感到困惑。在 resetZoom() 函数运行后，在我平移 svg 之前什么都没有发生，然后它迅速回到原点。知道为什么会发生这种情况吗？

在这里 fiddle :https://jsfiddle.net/84d596go/2/

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>

关于你的问题...

Any ideas why this might happen?

...发生这种情况是因为只有 call 中的缩放行为有一个 on 监听器改变了一些东西。