25

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 + ")");
    })
);

この種の干渉を引き起こさない変換を設定するより良い方法はありますか?

4

2 に答える 2

53

もう少し詳しく見てみると、この不安定さは、移動中にマウスの位置に適用される 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")...
于 2012-06-12T15:03:36.817 に答える