Mike Bostock（D3jsの作成者）のパン＆ズームの例はどのように機能しますか？

Question

私はこの例を理解することに苦労しています： https://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45

私は一般的な概念を理解して、今あなたが変換を適用することができますので、グラフ内のすべての点が便利ですsvgg -element、投入されていますそれに応じてすべての点の縮尺を変えてください。これらは、これらの点が入っている座標系全体を変換します。ただし、変換されないsvgの不可視のrectからの座標なので、これはパンに渡されるマウス座標には関係ありません。私は理解していない何

はこれです：

svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "none") 
    .style("pointer-events", "all") 
    .call(d3.zoom() 
     .scaleExtent([1/2, 4]) 
     .on("zoom", zoomed)); 

function zoomed() { 
    g.attr("transform", d3.event.transform); 
} 

はデフォルトsvg -rectangleのメンバ関数は.callですか？ここで何をするのですか？ And d3.zoomはドキュメンテーションの「動作」に従っています。それはどういう意味ですか、そして、これら2つの間のカップリングはここでどのように機能しますか？関数.onの目的は何ですか？'zoom'が渡されますか？私はそれが、イベントハンドラzoomedに要素のズームのブラウザイベントを渡すためだと仮定します。しかし、ここでパンニングはどのように処理されますか？それは私だけか、それとも.scaleExtentと.onをパラメータとしてd3.zoom()にするのがより意味がありますか？

Answer 1

は、のブラウザズームイベントを受信します。

ズーム機能がそうでなければRECTはグラムの後ろにイベントを受信して​​いないだろう、我々はグラム後RECTを持ってグラム要素に変換

注意を適用します。

svg - g - rect