D3 Collapsible Force 레이아웃 레이아웃에 노드를 동적으로 추가합니다.

Question

접을 수있는 레이아웃에서 노드를 동적으로 추가 할 때 몇 가지 문제가 있습니다. 내 데이터 세트는 동적으로 생성되어 강제 레이아웃이 생성 될 때마다 객체가 변경되므로 D3 mbostock에서 JSON을 초기 시작점으로로드하는 대신 로컬 객체를 사용하는 예제를 사용했습니다.

나는 pan + zoom을 추가했지만 노드를 추가하면 작동하지 않는 것 같습니다. 정적 객체 (테스트 용)가 있고 addNode 함수가 노드를 클릭 할 때 호출됩니다. var childrenTest=[ {"name": "Title", "size": 3938}, {"name": "Title", "size": 3938}, {"name": "Title", "size": 3938} ];

g.data.children[1].children = childrenTest;을하고 붕괴에 대한 데이터를 평평하게하고이를 업데이트하기 전에 노드 사이의 링크를 생성 예상되는 update();을 실행 : 나는 노드를 통해 추가하려합니다.

불행히도이 작업을 수행하면 내 그래프에서 부동 클러스터를 생성하는 내 그래프가 완전히 깨져서 링크와 노드가 사라지는 것으로 보입니다. 왜 노드를 제대로 추가하지 않는지 알아 내는데 도움이되는지 궁금합니다. 여기

내 코드의 예입니다 https://jsfiddle.net/Diffusion_net/hu6t2ywb/9/

(주 : addNode 명 기능은 때문에 테스트 목적으로 만 체크에 한 번 자식 노드 클릭에 노드를 추가합니다)

당신에게

감사

Answer 1

새로운 노드를 동적으로 추가하는 동안 키는 새로 만든 노드의 ID를 매핑하는 것입니다 (id를 this-> nodes.id = ++ i와 같은 노드에 할당하는 flatten 함수를 살펴보십시오). 고유해야하며 이미 레이아웃에있는 노드의 기존 ID와 겹치지 않아야합니다. 그렇게하지 않으면 귀하의 경우처럼 예측할 수없는 행동으로 이어질 수 있습니다.

이 문제를 해결하는 한 가지 방법은 새로 생성 된 노드에 새 id 값을 할당 할 수 있도록 레이아웃에 이미 몇 개의 노드가 있는지 기억하는 것입니다. 아래의 수정 된 병합 함수를 참조하십시오. 여기

var alreadyNodes = 0; //no of nodes already present on the layout 
    function flatten(data) { 
    console.log(data); 
    var nodes = [], 
    i = alreadyNodes; //offset to the node id 
    var flattenNodes = 0; //no of nodes flatten under the current node 
     //count only children (not _children) 
     //note that it doesn't count any descendents of collapsed _children 
     //rather elegant? 
    function recurse(node) { 
      if (node.children) node.children.forEach(recurse); 
      if (!node.id) { 
       node.id = ++i; 
       flattenNodes++; 
      } 
      nodes.push(node); 
    } 
    recurse(data); 
     //Done: 
    alreadyNodes = alreadyNodes + flattenNodes; 
    return nodes; 
} 

alreadyNodes 매장 레이아웃에 이미 존재하는 노드의 어떤과 flattenNodes 노드의 어떤 레이아웃에 추가 할 계산됩니다.하지 Nodes이 노드를 반환하기 전에 업데이트됩니다 (마지막 행). 새로운 노드가 새로운 id를 얻는 것을 보장하는 flatten이 호출 될 때마다 id에 대한 오프셋이 어떻게 제공되는지 확인하십시오.

이 정보가 도움이되기를 바랍니다.