d3 techanjsをズームできません

Question

http://techanjs.org/で使用されているコードとほとんど同じコードを使用しています。開発者がグラフをhereにレンダリングしたときに、グラフにズーム機能を追加しようとしていました。しかし何とか私はそれをズームすることができません。エラー選択がコンソールで定義されていません。私はチャートをレンダリングするために次のコードを使用しています。 https://paste.fedoraproject.org/paste/7gJq9wKL4h4s862EDuxnQQ。私はここで何か間違っていると確信しています、私はまだD3を学んでいるので、私はそれに関する援助を得る場合は本当に感謝します。

Answer 1

私は変数selectionを参照していますが、定義されていないことが問題だと思います。したがって

-

選択が

selectionが定義されていませんが、あなたのbigchart関数に渡されるパラメータです。

ただし、定義されていない機能のreset、zoomedで使用します。

//Zoom Begins 
function reset() { 
     zoom.scale(1); 
     zoom.translate([0,0]); 
     selection.call(draw); // this will throw an error 
    } 

    function zoomed() { 
     x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain()); 
     y.domain(d3.event.transform.rescaleY(yInit).domain()); 
     yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain()); 

     selection.call(draw); // this will throw an error 
    } 
//Zoom Ends 

いずれか、固定（他の機能のような）パラメータとして関数に選択を渡すために - あるいはそれはresetとzoomed機能で参照できるようにselectionBigChartのプロパティします。あなたは明らかに関数を呼び出すとき

すなわち

// pass selection to the functions as a parameter 

function reset(selection) { 
    zoom.scale(1); 
    zoom.translate([0,0]); 
    selection.call(draw); 
} 

function zoomed(selection) { 
    x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain()); 
    y.domain(d3.event.transform.rescaleY(yInit).domain()); 
    yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain()); 
    selection.call(draw); 
} 

は、その後、例えば...正しいオブジェクトを渡します。

zoom = selection.call(d3.zoom().on("zoom", zoomed)); 

ではなく

zoom = d3.zoom().on("zoom", zoomed),