나는 다음과 같은 문제가있다 (바이올린 예와) D3 네트워크 오류로 노드

Question

추가 :

나는 작은 시나리오가 - 그래프에 세 개의 상호 연결된 노드를 추가

을 필터를 사용하여 하나를 제거하는 함수, 다시 추가

제거한 것을 다시 추가하면 조금 뒤섞여 구석에 남습니다. 어딘가에 뭔가 설정 기능이 없다고 확신합니다. 제 jsFiddle을 보시고 언제든지 업데이트하십시오.

내 추가 노드 백 기능

/* step 3: node B reappears with links */ 
    function step3() { 
     var nB = {id: 'bbb'}; 

     nodes.push(nB); 

     /* find exiting nodes for links */ 
     var nA = nodes.filter(function(n) { return n.id === 'aaa'; })[0]; 
     var nC = nodes.filter(function(n) { return n.id === 'ccc'; })[0]; 

     var lAB = {source: nA, target: nB}; 
     var lBC = {source: nB, target: nC}; 
     links.push(lAB); 
     links.push(lBC); 

     recalc(); 
    } 

감사

Answer 1

문제는 노드와 링크를 제거하는 방법입니다. 다음 줄은 이전의 정의를 그림자, 새로운 nodes 및 links 배열을 만들 :

nodes = nodes.filter(function(n) { return n.id !== 'bbb'; }); 
links = links.filter(function(l) { return (l.source.id !== 'bbb' && l.target.id !== 'bbb'); }); 

오래된, 이제 그림자 정의는 여전히 내부적으로 힘 레이아웃에 의해 사용됩니다. 즉, (제거 된) 노드 bbb에 대한 위치가 여전히 업데이트되고 있습니다. 덮어 쓴 정의가 tick 처리기 함수에서 사용 되었기 때문에이를 볼 수 없습니다.

이제 새로운 노드와 새로운 링크, 힘 레이아웃 (이전 nodes 및 links) 업데이트되지는 tick 핸들러 함수에 의해 사용되는 경우에만 새로운 것들이다 내부적으로 사용하는 데이터 구조를 추가 할 때. 즉, 새 노드가 그려지는 동안 강제 레이아웃은 이에 대해 알지 못하므로 좌표를 계산하지 않습니다.

두 가지 방법으로 해결할 수 있습니다. 다른 대답에서 지적한 바와 같이, 당신은 단순히 nodes 재 할당 할 수 있습니다 힘 레이아웃에 그들은 변경할 때 (또한 links를!) :

force.nodes(nodes); 
force.links(links); 

이 방법의 단점은 힘 레이아웃의 내부 상태를 잃을 것입니다 . 변경 사항을 적용 할 때 레이아웃이 공정하게 정해지는 특별한 경우는별로 중요하지 않지만, 힘이 여전히 강하게 시작된 직후에이를 수행하면 몇 가지 "급격한 변화"가 발생할 수 있습니다.

대안 재 할당하는 대신 직접 힘 레이아웃에 의해 사용되는 데이터 구조를 변경하는 것이다

function step2() { 
    links.splice(0, 1); 
    links.splice(1, 1); 

    nodes.splice(1, 1); 

    recalc(); 
} 

완료 예 here. 여기서는 노드와 링크의 색인을 하드 코드하여 단순화했습니다.하지만 this demo에서와 같이 분명히 동적으로 계산할 수도 있습니다.

Answer 2

나는 당신의 바이올린 연주. 새로 추가 된 노드에는 x와 y 좌표가없는 것 같습니다. 이 속성은 강제 레이아웃에 의해 생성됩니다. 그래서 노드를 강제 레이아웃에 다시 할당했습니다. 그것은 당신의 문제를 해결합니다. 여기를 참조하십시오 : JFiddle