d3.behavior.zoomドラッグ時のジッタ、シェイク、ジャンプ、バウンス

Question

d3.behavior.zoomを使用してツリーレイアウトでパンとズームを実装していますが、バウンシングまたは数値として記述する動作を示しています不安定。あなたがドラッグを開始すると、ディスプレイはちょうど消えてしまうまでわかりにくく飛びます。コードは次のようになります。

var svg = target.append ("g"); 
... 
svg.call (d3.behavior.zoom() 
    .translate ([0, 0]) 
    .scale (1.0) 
    .scaleExtent([0.5, 2.0]) 
    .on("zoom", function() { 
     svg.attr("transform","translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ") scale(" + d3.event.scale + ")"); 
    }) 
); 

このタイプの干渉を起こさない変換を設定するためのより良い方法はありますか？

Answer 1

もう少し見ると、動きの間にマウスの位置に適用されるsvg要素の変換が不安定になっています。私が解決した解決策は、ズーム動作と要素コンテンツの間に別の "g"要素を挿入して、ズーム/パン変換を受け取ることです。

var svg = target.append ("g"); 
var child = svg.append ("g"); 
... 
svg.call (d3.behavior.zoom() 
    .translate ([0, 0]) 
    .scale (1.0) 
    .scaleExtent([0.5, 2.0]) 
    .on("zoom", function() { 
     child.attr("transform","translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ") scale(" + d3.event.scale + ")"); 
    }) 
); 
... 
child.append("line")...