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

这个要点指向这个工作示例，最终为我指出了至少针对我的情况的解决方案。据我所知，它也应该解决您的问题。

你缺少的是你需要告诉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.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 4

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

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

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

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

Answer 5

在重置中设置比例

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