Блог

Я озадачен тем, что блокирует сброс здесь. После выполнения resetZoom() функции ничего не происходит, пока я не панорамирую svg, затем он возвращается к исходной точке. Есть идеи, почему это может произойти?

Скрипка здесь: 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;
  

Вместо того чтобы создавать другое поведение масштабирования внутри 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 слушателя, который что-то меняет.