javascript - D3 v4 : Reset zoom state

Question

我有一个可以缩放的 SVG，还有一个“重置”按钮。我正在使用

重置缩放

zoom.transform(selection, d3.zoomIdentity)

这按预期工作并重置 SVG 上的缩放。但如果我再次缩放，它会缩放回上次状态。例如。我滚动，按“重置”按钮，然后缩小 -> SVG 被放大。如何重置 zoom 对象的内部缩放状态？尝试了不同的解决方案，但均无效。

这里是完整的缩放代码

//zoom cannot be done on the <svg> directly
var container = d3.select("#g5063")

var zoom = d3.zoom().
    scaleExtent([0.7, 8]).
    on("zoom", () => {       
        container.attr("transform", d3.event.transform)                
    })

$("#reset-zoom-button").click(() => {
    zoom.transform(container, d3.zoomIdentity);
})

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

Answer 1

我遇到了同样的问题

this.svg.selectAll('g').call(this.zoom.transform, d3.zoomIdentity.scale(1));

然后我改成

this.svg.call(this.zoom.transform, d3.zoomIdentity.scale(1));

解决了问题。

我认为 _zoom 也将存储在 svg 级别。