D3 v4：重置缩放状态

问题描述

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

I have a SVG which can be zoomed and also a "reset" button. I'm resetting the zoom with

zoom.transform(selection, d3.zoomIdentity)

这可以按预期工作并重置SVG的缩放比例。但是，如果我再次缩放，它将缩放回上一个状态。例如。我滚动查看，按重置按钮，然后缩小-> SVG放大。如何重置 zoom 对象的内部缩放状态？尝试了不同的解决方案，但都不起作用。

This works as expected and resets the zoom on the SVG. But if I zoom again, it zooms back to the last state. E.g. I scroll in, press "reset" button and then zoom out -> SVG is zoomed in. How can I reset the internal zoom state of the zoom object? Tried out different solutions and none of them works.

此处是完整的缩放代码

//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)

推荐答案

我使用

I meet the same problem using

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

，然后我更改为

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

解决了这个问题。

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

I think the _zoom will be stored in the svg level also.

这篇关于D3 v4：重置缩放状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！