트리 구조 - 루트 노드 온로드로 시작하기

Question

다음과 같은 트리 다이어그램을 작성합니다 : http://bl.ocks.org/2503502.

모든 노드가 축소 된 트리를 만들고 싶습니다. 따라서 초기 그래프에는 하나의 노드 (루트) 만 있어야합니다. 페이지가로드되면 루트 노드 만 표시되고 클릭하면 나머지 자식 노드가 표시됩니다.

어떻게하면됩니까?

Answer 1

나는 이것이 얼마 전에 물어 본 것을 볼 수 있지만 나는 어쨌든 비슷한 상황에 있었으므로 어쨌든 대답 할 것이다.

루트 노드를 클릭 할 수 있는지 여부에 따라 여기에 몇 가지 옵션이 있습니다. 루트 노드를 클릭 한 후 현재 제공 한 예제에 표시되거나 자식 노드가 모두 필요하면 자식 노드도 접을 수 있습니다.

는 (단지 루트 노드가 수납) 1 OPTION은 함수가 update(root); 코딩되는 d3 객체의 초기화에

( 또는 cmd를 + F F 조 CTRL + 할)는 toggle(root)에 넣습니다. 변수 이름 root은 주어진 예에 따라 다르지만 버전과 함수 이름은 다를 수 있습니다 (예제 코드를 제공하지 않았으므로).

옵션 2 (모든 노드가 붕괴)

당신은 동일 할 이상하지만, 옵션 1로 직전 새로 당신은 또한 toggleAll 당신은 또한 어떤 삽입해야하는 함수가 root.children.forEach(toggleAll);을 넣어 toggle(root); 삽입 :

function toggleAll(d) { 
    if (d.children) { 
     d.children.forEach(toggleAll); 
     toggle(d); 
    } 
} 

대체 옵션

내가 군대를 가지고있는 옵션 ven은 위의 것에 국한되지 않습니다. brantolsen.github.com으로이 예제 (https://stackoverflow.com/a/11649427)를 수행하면 달성하려는 것을 구현하는 다른 예제가 있습니다.