web-dev-qa-db-ja.com

D3 v4：ズーム状態をリセット

ズームできる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)
javascriptd3.jssvgzoom
10
ierqjirj13r109r1

私は使用して同じ問題に遭遇します

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

そして私はに変更します

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

問題を解決した。

_zoomはsvgレベルにも保存されると思います。

1
shenyu

この 要点 は この作業サンプル を指し、少なくとも私の状況では解決策を示してしまいました。私の知る限り、それはあなたの問題も解決するはずです。

不足しているのは、初期の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が初期設定の位置設定にリセットされますが、これをいじる必要がある可能性があります。

これがあなたのために働くかどうか私に知らせてください。

1
Austin A

これは期待どおりに機能し、SVGのズームをリセットします。しかし、もう一度ズームすると、最後の状態にズームバックします。

私が発見した簡単な調査の後、私は同じ問題を抱えています。ズームを適用してズームを_<svg>_にリセットすることはできません。_<g>_を追加して、そこにズームを適用する必要があります。

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

zoom.transform(d3.select(chartContainer).select('svg.view'), d3.zoomIdentity.scale(1));に変更されました。

1
Gabriel Ferreira

同じ問題が発生し、次の行に変更して解決しました。

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

また、リセットでスケールを設定します

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

})
0
baklazan