D3 v4:重置缩放状态

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

还可以在重置中设置比例

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

})