Question

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

重置缩放

zoom.transform(selection, d3.zoomIdentity)

这可以按预期工作并重置SVG上的缩放。但如果我再次缩放，它会缩放回最后一个状态。例如。我滚动，按“重置”按钮，然后缩小 - ＆gt; 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

还在重置

中设置比例

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

})

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

此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 5

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

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)

这是可测试的脚本。

＆＃13;

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

＆＃13;

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

＆＃13;

D3 v4：重置缩放状态

5 个答案: