D3 Javascript에서 강제 지시 그래프의 노드 사이의 링크

Question

기본적으로 D3 Javascript를 사용하여 최소 150 개의 노드가 포함 된 그래프 작업을하고 있습니다. 아이디어는 다음과 같이 설명 할 수 있습니다.

하나의 노드가 100 개의 노드에 연결됩니다. 이 100 개의 노드 중 49 개의 노드가 다른 49 개의 노드에 연결됩니다.

하자. 나는 100 명을 안다. 49 명이 생일을 맞았습니다. 각각은 노드를 나타냅니다.

이렇게하면 source과 target을 사용하여 Javascript의 일부 배열을 통해 링크 할 수 있습니다. 나는 D3의 Force-Directed Graph에서 이해해야 할 중요한 것을 놓치고 있다고 생각합니다. 지금까지 알고있는 링크는 source 및 target으로 구현할 수 있습니다. 내 문제는이 노드에 이러한 링크를 어떻게 연결할 수 있는지 이해할 수 없다는 것입니다. 나는 내 이름, 사람들의 이름과 생일을 지키기위한 배열을 어떤 기준으로 만들 수 있는지 모르기 때문에 함께 연결될 수 있습니다. 내 그래프에서, 그것은 나에게 올바른 사람이지만 잘못된 생일을 준다. 누구든지이 문제에 대해 올바른 방법을 안내해 주시겠습니까? 나는이 튜토리얼을 따라 가고 있는데 이름, 사람들 이름, 생일 등의 정보를 추가하는 배열을 어떻게 만들 수 있는지 이해할 수 없었다. 당신의 도움이 아주 많이 주시면 감사하겠습니다 http://bl.ocks.org/mbostock/4062045

.

Answer 1

노드와 링크의 연결 방법은 색인을 기준으로합니다. 즉, target: 0 인 경우 해당 링크의 대상 노드가 강제 레이아웃에 전달 된 노드 목록의 첫 번째 노드임을 의미합니다. 링크와 노드 모두에 필요한 모든 데이터를 추가 할 수 있습니다. 링크의 경우 노드는 link.source과 link.target을 통해 사용할 수도 있습니다.

또는 링크의 원본과 대상을 개체 자체로 지정할 수 있습니다. 실제로는 링크를 강제 레이아웃에 전달할 때 내부적으로 수행하는 작업입니다. 인덱스와 같이 작동하지 않으므로 해결 된 노드 오브젝트로 바뀝니다 (링크를 통해 실제 오브젝트에 액세스 할 수있는 이유입니다).

외부 데이터 (예 : JSON)를 통해 그래프 구조를 지정하는 경우 색인을 사용하여 링크의 노드를 식별해야합니다. Javascript로 데이터 구조를 생성하는 경우 실제 객체에 대한 참조를 대신 사용할 수 있습니다.