d3.js v4 확대 된 요소 드래그 마우스 점프

Question

안녕하세요 Stackoverflow Community!

다음과 같은 문제가 있습니다 : div로 노드를 가진 d3 force-directed 그래프를 만들었고 d3-zoom 동작을 포함 시켰습니다. 크게 축소하거나 크게 확대 한 경우 노드 드래그가 너무 빠르거나 (축소 된 경우) 또는 너무 느리게 (축소 된 경우) 나타납니다. 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