d3.js v4ズームした要素をドラッグするとマウスが飛びます

Question

こんにちは、Stackoverflow Community！

私は次のような問題があります。 divをノードとし、d3-zoomビヘイビアを含むd3 force-directedグラフを作成しました。 ズームアウトしたりズームインしたりすると、ノードのドラッグが速すぎる（ズームインしたとき）か遅すぎる（ズームアウトしたとき）のいずれかになりました。 d3.mouse（d3.select（ "。links"）。node（））を適用して、ズームした領域内からマウス座標を取得するように修正しました。

しかし、私はそれをしたので、ノードをドラッグすると、このノードがジャンプすることに気付きました。代わりにマウスのすぐ後ろにあるマウスポインタに集中します。

d3.drag().subject(function() { 
     var t = d3.select(this); 
     return {x: parseInt(t.style("left"),10), y: parseInt(t.style("top"),10)}; 
    }) 

しかし、それはどんな影響を持っていなかったと私は今アイデアの出だ：私はそうのような対象を指定することで、これを固定しようとしたいくつかの研究の後

。私は誰かがここで私を助けることができればうれしいです。..

が問題を示すために、フィドル、次のとおりです。https://jsfiddle.net/jxkgfdcm/

Answer 1

ドラッグであなたがやっているので、それは、ノードの中央にジャンプ：

function dragged(d) { 
    var coordinates = [0, 0]; 
    coordinates = d3.mouse(d3.select(".links").node()); //this will give the link end location..so it will jump to the centre of the node 
    var x = coordinates[0]; 
    var y = coordinates[1]; 

    d.fx = x; 
    d.fy = y; 


    d.fixed = true; 
} 

をそれはされている必要があります。

function dragged(d) { 

    d.fx += d3.event.dx;//give delta increment to current position 
    d.fy += d3.event.dy//give delta increment to current position 

    d.fixed = true; 
} 

作業コードhere