d3.js에서 트리의 자식 노드 축소/확장?

Question

저는 트리 구조를 구축하고 있습니다. 예를 들어 내 자신의 json에서 내 자신의 데이터 집합으로 예제 중 하나를 수정하고 있는데 일부 기능을 만들려고합니다.

내 트리의 레이아웃은 다음과 같습니다. 트리 예제 : http://mbostock.github.com/d3/ex/cluster.html

클릭 한 노드의 하위 노드를 축소하려는 onclick 이벤트를 (동그라미에) 추가하고 있습니다. 즉, 사용자가 노드와 연결된 강철 원을 클릭하면 해당 노드가 사라지기를 원합니다.

문서를 훑어 본 결과 노드가 붕괴되거나 사라지는 것을 허용하는 항목이 표시되지 않았습니다.

어떻게해야합니까?

Answer 1

이있다 :

http://mbostock.github.com/d3/talk/20111018/tree.html

기타가 있습니다 그러나 여기에 몇 가지 아이디어를 줄 수도 당신이 그들을 클릭하여/숨기기 노드를 표시 할 수있는 힘을 지시 레이아웃은이다 내 SVG Open keynote의 대화 형 계층 적 레이아웃 예제입니다.

Answer 2

불행히도 나는 여전히 D3에 익숙해 져 있으며 질문에 가장 잘 답변하는 방법을 모르겠습니다. http://bl.ocks.org/1062288

Answer 3

몇 가지 접근법이 있습니다. 하나는 규칙적인 표시를 사용하여 어린이 마크 업을 숨기는 것입니다 (불투명도 : 0 또는 표시 : 없음). 그러나 이것은 단지 데이터를 보이지 않게 만들고, 트리는 데이터가있는 것처럼 모양을 유지합니다. 단지 볼 수 없습니다.

일반적으로 위의 링크에서 강제 지시 레이아웃 예제와 동일한 접근 방식을 사용할 수 있기 때문에 트리에 데이터가없는 것으로 가정하고 업데이트해야합니다.

그것은 귀결 : 1) 클릭 이벤트는 노드의 자식 속성의 이름을 변경 접을 수있는 노드 3)에 클릭 이벤트를 추가)를 D3 트리 2를 구축하는 함수를 사용하여 1에서 함수를 호출) 노드의 자식없이 트리를 다시 그립니다.

여기 nkoren의 대답 (http://bl.ocks.org/1062288)에있는 링크에서 관련 코드입니다 :

function update() { 
    // build the tree layout here 
    // append on("click", click) to the collapsible nodes 
} 

// Toggle children on click 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
}