ズーム可能なツリー内のD3js V4センターノード

Question

クリックしたツリー内のノードをセンタリングするためのRob Schmueckerのexampleが見つかりました。この例はD3jsバージョン3で動作します。この例をd3js version 4に移植しました。しかし、私の例では、私はsvgを移動しようとすると、センタリング後にSVGがジャンプします。誰かが間違っていることを知っていますか？ここでいくつかのコードスニペット。

var baseSvg = d3.select("#tree-container").append("svg").attr("width", viewerWidth) 
                 .attr("height", viewerHeight) 
                 .attr("class", "overlay") 
                 .call(zoomListener); 

function zoom() { 
    if(d3.event.transform != null) { 
    svgGroup.attr("transform", d3.event.transform); 
    } 
} 

function centerNode(source) { 
    t = d3.zoomTransform(baseSvg.node()); 
    x = -source.y0; 
    y = -source.x0; 
    x = x * t.k + viewerWidth/2; 
    y = y * t.k + viewerHeight/2; 
    d3.select('g').transition().duration(duration).call(zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k)); 
} 

Answer 1

centerNode内の選択を「g」から「svg」に変更すると、そのトリックを行うようです。これは、ズームリスナーがsvg要素で呼び出されたためです。

参考のため、centerNode機能は現在、次のようになります。

function centerNode(source) { 
    t = d3.zoomTransform(baseSvg.node()); 
    x = -source.y0; 
    y = -source.x0; 
    x = x * t.k + viewerWidth/2; 
    y = y * t.k + viewerHeight/2; 
    d3.select('svg').transition().duration(duration).call(zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k)); 
} 

Answer 2

Collapsible Treeの例をドキュメントでご覧ください。 これはあなたを助け、D3.jsのバージョン4を使用しています