0

我正在完成本教程 -

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() 的部分之后说的。我不明白将节点 ID 映射到节点对象意味着什么，因为似乎节点对象是随后由 update() 方法创建的。

这些节点对象是什么？mapNodes() 将如何

4

1 回答 1

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

或者

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

在初始数据中，每首歌曲都有一个 id，而源/目标只是定义为指向这些 id。通过这一步，他用与 id 匹配的实际对象替换初始 id 字符串。

于 2013-04-07T06:04:00.493 回答