D3.js를 사용하는 계층 적 힘 다이어그램

D3.js를 사용하여 계층 적 힘 도표를 생성하고 싶습니다. - 그래프를 자식 레벨로 확장하는 노드를 클릭하여 나무와 유사한 구조를 탐색 할 수있는 강제 그래프입니다 (아이들 사이의 관계가 보여지는 곳). 노드는 부모 또는 형제 두 가지 방법으로 서로 관련 될 수 있습니다. 부모 관계는 노드가 부모에 속한다는 것을 나타냅니다.D3.js를 사용하는 계층 적 힘 다이어그램

시작 지점에서 강제 클러스터 예제 : https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html을 살펴 보았지만 위의 관계가 포함되어 있지만 전체 네트워크가 아닌 확장 된 클러스터 만 렌더링하는 방법은 알 수 없습니다 (아래 이미지 참조). 빨간색 링크가 형제 관계를 나타내는 힘 다이어그램 :

JSON data: 
{"nodes": 
     [ 
     {"name":"Person 0","group":"Person 0"}, 
     {"name":"Person 1","group":"Person 1"}, 
     {"name":"Person 2","group":"Person 1"}, 
     {"name":"Person 3","group":"Person 1"},  
     {"name":"Person 4","group":"Person 3"}, 
     {"name":"Person 5","group":"Person 3"} 
     ], 
"links": 
     [ 
     {"source":1,"target":0,"type":"sibling"}, 
     {"source":2,"target":1,"type":"parent"}, 
     {"source":3,"target":1,"type":"parent"}, 
     {"source":3,"target":2,"type":"sibling"}, 
     {"source":4,"target":3,"type":"parent"}, 
     {"source":5,"target":3,"type":"parent"}, 
     {"source":4,"target":5,"type":"sibling"} 
     ] 
}

위

Expanding cluster

또한 대신 부모 "유형"를 사용하는의 JSON 어린이와 "어린이"를 배치 할 수있을 것입니다 :

그러나

{ 
"nodes": [ 
    { 
     "name": "Person 0", 
    }, 
    { 
     "name": "Person 1", 
     "children": [ 
      { 
       "name": "Person 2", 
      }, 
      { 
. 
. 
. 
"links": [ 
    { 
     "source": 1, 
     "target": 0 
    }, 
. 
.

, 어떻게 그런 다음 트리 구조를 결합 할 유지하면서 자식 노드 간의 관계 추적 Tree

하부 섹션 (상부 이미지에서 유사한 기능) 시각의 원하는 레이아웃을 나타낸다 : 같이

상상력 트리 형 구조로 보일 것이다.

진행 방법에 대한 의견이 있으십니까?

출처

2012-10-03 graphmeter

비슷한 종류의 문제가있었습니다. 큰 데이터 세트에서 클릭 한 노드 주위에 로컬 네트워크를 보여주고 싶었습니다. 내 솔루션은 몇 가지 포인터를 제공 할 수 있습니다 : timebandit.github.io/graphSub – timebandit

암시 적으로 동일한 직접 부모를 가진 모든 노드는 형제입니다. 따라서 노드가 형제 노드인지 여부를 추 가적으로 추적 할 필요가 없습니다.

다른 형제 노드와 만 관련이 있지만 부모가없는 노드 (예 : 사용자 0과 사용자 1 사이의 관계)가있는 경우 트리 레이아웃이 올바른 선택이 아닙니다. 대신, 당신은 강제 레이아웃을 시도 할 수도 있습니다.

출처

2014-05-02 12:40:53 Elvis

D3.js를 사용하는 계층 적 힘 다이어그램

답변

관련 문제