d3 자습서에서 노드 객체를 노드 ID에 매핑하는 방법은 무엇입니까?

Question

나는이 튜토리얼을 통해 일하고 있어요 -

http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

내가 이해하지 못하는 부분이있다.

"노드 ID를 노드 개체에 매핑 한 다음 원시 데이터에 있던 ID 대신 노드 링크 개체의 원본과 대상을 바꿉니다. 이렇게하면 D3의 강제 레이아웃이 올바르게 작동하고, 우리 노드 배열과 링크 배열의 순서를 걱정하지 않고도 노드를 추가/제거 할 수 있습니다. "

setupData = (data) -> 
    # initialize circle radius scale 
    countExtent = d3.extent(data.nodes, (d) -> d.playcount) 
    circleRadius = d3.scale.sqrt().range([3, 12]).domain(countExtent) 
    data.nodes.forEach (n) -> 
    # set initial x/y to values within the width/height 
    # of the visualization 
    n.x = randomnumber=Math.floor(Math.random()*width) 
    n.y = randomnumber=Math.floor(Math.random()*height) 
    # add radius to the node so we can use it later 
    n.radius = circleRadius(n.playcount) 
    # id's -> node objects 
    nodesMap = mapNodes(data.nodes) 
    # switch links to point to node objects instead of id's 
    data.links.forEach (l) -> 
    l.source = nodesMap.get(l.source) 
    l.target = nodesMap.get(l.target) 
    # linkedByIndex is used for link sorting 
    linkedByIndex["#{l.source.id},#{l.target.id}"] = 1 

    data 

setupData() 함수에 대한 부분을 말합니다. 노드 객체를 나중에 update() 메소드로 생성 한 것처럼 보이기 때문에 노드 ID를 노드 객체에 매핑하는 것이 무엇을 의미하는지 이해할 수 없습니다.

이 노드 객체는 무엇입니까? 어떻게하면 mapNodes()

Answer 1

강제 유도 그래프를 만들 때 각 노드의 데이터와 노드 연결 방법을 제공해야합니다. 연결 방법에 대한 정보는 강제 그래프에서 직접 호출되는 force.links([]) 메서드에 의해 설정됩니다. 링크 배열의 각 데이터 포인트에는 소스와 대상이 있으며, 인덱스 (데이터 배열의 위치) 또는 배열 자체의 실제 객체로 정의됩니다.

예 :

var banana = {type: "fruit", color: "yellow"}; 
var apple = {type: "fruit", color: "red"}; 
..etc 

var data = [apple, banana, sausage, peach, bagel, kimchee.. etc etc ] 

var links = [{source: 1,target: 2}, 
      {source: 2, target: 10}, ....etc. ] //as index 

또는 initial data에서

var links = [{source:banana,target:apple}, 
       {source:apple, target:orange}, 
       ....etc. ] //as object 

각 곡 ID를 갖고, 소스/타겟은 단지 그 식별자를 가리키는 것으로 정의된다. 이 단계에서 그는 초기 ID 문자열에 대한 ID와 일치하는 실제 오브젝트를 대체합니다.