D3折りたたみ式ツリー - ズーム時に跳ね返る

Question

私はすでにこれを理解しようと多くの時間を費やしています。 私の目標はd3折りたたみツリーを作成することですが、何らかの理由でそれをズームすると、ツリーは位置0,0に移動します。私はすでにこの1つのような問題でいくつかの質問を見たがd3.behavior.zoom jitters, shakes, jumps, and bounces when draggingしかし、それを私の状況に適用する方法を理解することはできない。

私はこの部分が問題になっていると思いますが、適切なズーム機能をどのように変更するかはわかりません。ここで

d3.select('g').transition() 
    .duration(duration) 
    .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")") 
zoomListener.scale(scale); 

は私のコードです：https://jsfiddle.net/ramo2600/y79r5dyk/11/

Answer 1

あなたは[100,100]ではなく、それについてズームd3.behavior.zoom()を伝えるを配置するために、あなたのズーム可能なgを翻訳しています。だからそれは[0,0]から始まり、あなたは "ジャンプ"を見る。

function centerNode(source) { 
    scale = zoomListener.scale(); 
    // x = -source.y0; 
    y = -source.x0; 
    // x = x * scale + viewerWidth/2; 
    x = 100; 
    y = 100; 
    // y = y * scale + viewerHeight/2; 
    d3.select('g').transition() 
     .duration(duration) 
     .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")") 
    zoomListener.scale(scale); 
    zoomListener.translate([x,y]); //<-- tell zoom about position 
} 

更新fiddle：

はあなたにcenterNode機能を変更します。