D3グラフを初期ズームおよび0,0の位置に移動する方法 - グラフをリセットしますか？

Question

こんにちは、私はボタンをクリックするだけで、グラフがズームアウトされた0,0の位置にあります。基本的にはリセットボタンです。 可能ですか？どの要素でそれを行うことができますか？

それは次のようになります -

d3.select('svg').select('g').transition() 
.duration(1000).attr('transform', "translate(0,0)scale(1)") 

しかし、上記のは、xとy軸を含む全体のグラフを移動し、それをズームアウト。私はプロットされた領域内の要素だけを線、点、x軸とy軸の値のように変更したい。

助けてください。 JSFiddle

Answer 1

基本的に、あなただけのあなたは、すべての入力コントロールを集中管理するための方法を実装する必要があります。1.

すべてのバック位置（0,0）に設定する必要があり、スケール。私はちょうどラインの下に使用して（0,0にグラフ要素を移動し、初期ためにズームアウト） "リセット" を達成することができた

http://jsbin.com/niqara/2/edit?js,output

function reset(source) { 
    d3.select('g').transition() 
    .duration(750) 
    .attr("transform", "translate(0,0)scale(1)"); 
    zoomListener.scale(1); 
    zoomListener.translate([0, 0]); 
} 

Answer 2

： -

function resetGraph(){ 
    zoom.scale(1); //Zoom out to this scale 
    zoom.translate([0, 0]); //move/drag chart to 0,0 xy position 
    zoomed(); //Handler that updates all elements after zoom performed 
    slided(); //Optional- to update slider which works to zoom in and zoom out 
} 

基本的にすべてのこの関数内に入ることができ、グラフをリセットするためのボタンのクリックやどこでも呼び出すことができます。