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

我遇到了同样的问题

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

我改成

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

解决了问题。

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

Answer 2

这个gist，指向this working sample，最终至少为我的情况指出了解决方案。据我所知，它也应该可以解决您的问题。

您缺少的是您需要告诉zoomIdentity 初始x、y 和k 状态应该是什么。 x 和 y 状态使用 .translate(x,y) 设置，比例使用 .scale(k) 设置。下面的代码应该可以工作。

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

据我所知，将zoomIdentity 转换为 0,0 应该始终将 svg 重置为初始设置位置设置，但您可能不得不尝试一下。

让我知道这是否适合你。

Answer 3

这会按预期工作并重置 SVG 上的缩放。但是如果我再次缩放，它会缩放回最后一个状态。

经过快速研究，我发现了同样的问题。您不能对<svg> 应用缩放和重置缩放，您需要附加<g> 并在那里应用缩放。

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

改为 zoom.transform(d3.select(chartContainer).select('svg.view'), d3.zoomIdentity.scale(1)); 它对我有用。

Answer 4

我最终遇到了同样的问题，并通过更改为以下行来解决它。

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

这是完整的代码。

//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(() => {
    svg.call(zoom.transform, d3.zoomIdentity.scale(1));
})

var svg = d3.select("#svg").call(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(() => {
    svg.call(zoom.transform, d3.zoomIdentity.translate(250, 100).scale(1))
})

var svg = d3.select("#svg").call(zoom)
svg.call(zoom.transform, d3.zoomIdentity.translate(250, 100).scale(1))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg" width="500" height="200">
  <g id="g5063">
    <polyline
       fill="none"
       stroke="#0074d9"
       stroke-width="3"
       points="
         0,120
         20,60
         40,80
         60,20"/>
  </g>
</svg>
<button id="reset-zoom-button">Reset</button>

Answer 5

在重置中也设置比例

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

})