D3 Drag を使用して、キャンバスの周りにいくつかの円をドラッグしています。次に、固定位置でそれらを持っています。ただし、作成した別の svg 要素から離れた場所に配置したいと考えています。
node.attr("transform", function(d,i) { return "translate ("+ arc[i].centroid() +")" +"translate("+d.x+","+d.y+")"; })
ドラッグすると、マウスを複数回クリックするまで円はドラッグされず、通常は実際のマウスの手から離れています。
重心を取り除くことができることはわかっていますが、この問題を回避する方法を知りたいです。
最初のドラッグ試行で得られるジャンプは、57 行目の変換がさらに下の変換と一致しないという事実から生じます。ジャンプを回避するには、57 行目と 76 行目を一致させます。57 を次のように変更します。
d3.select(this).attr("transform", "translate ("+ arc[i].centroid() +")" +"translate("+d.x+","+d.y+")");
これを機能させるには、52 行目で d と i をパラメーターとして渡す必要がありました。
.on("drag", function(d, i) {
作業フィドル: http://jsfiddle.net/Zc4z9/11/