D3强制布局：如何通过它的ID而不是索引在“节点”数组中索引数据

我正在玩D3力布局。在强制布局中，您必须给出“链接”和“节点”才能制作强制图。 D3将链接的“源”和“目标”解释为“节点”数组中节点的索引。我的问题是：如何通过其在“节点”属性中的ID而不是索引在“节点”数组中的索引数据？这里是我的JSON文件：D3强制布局：如何通过它的ID而不是索引在“节点”数组中索引数据

{ 
    "nodes": 
    [ 
     {"name": "A", "ID": 10}, 
     {"name": "B", "ID": 20}, 
     {"name": "C", "ID": 30}, 
     {"name": "D", "ID": 40} 
    ], 
    "links": 
    [ 
     {"source": 10, "target": 20}, 
     {"source": 20, "target": 30}, 
     {"source": 30, "target": 40} 
    ] 
}

我知道它已经在这里问： D3: Using node attribute for links instead of index in array

但解决的办法是不是我想要的。因为最近我刚刚通过传递一个简单的按键功能可按看到了一些人做了特殊的索引：

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

node = nodesG.selectAll("circle.node") 
    .data(curNodesData, (d) -> d.id) 


link = linksG.selectAll("line.link") 
    .data(curLinksData, (d) -> "#{d.source.id}_#{d.target.id}")

问题是我不明白的“＃含义{} d.source.id _＃{} d.target.id”。

有人想解释一下吗？

好的。以上是用coffescript编写的。当我试图将其转换为常规D3的JavaScript，下面不能工作：

node = nodesG.selectAll("circle.node") 
     .data(curNodesData,function(d) {return d.ID;}) 


    link = linksG.selectAll("line.link") 
     .data(curLinksData, function(d) {return "#{d.source.id}_#{d.target.id}";})

不能按预期之一：

link = linksG.selectAll("line.link") 
      .data(curLinksData, function(d) {return d.source.id+"_"+d.target.id;})

感谢德里克

来源

2015-04-16 derek

有两种不同的东西会在这里 - 第一，链接的解析，然后将数据向匹配DOM元素。如果我正确理解你的问题，你就会关心前者。您可以在您的代码中将链接中节点的ID替换为相应节点对象的引用 - 这是您在指定ID时在内部执行的操作。这允许您以任何您喜欢的方式解析ID。 –

@Lars Kotthoff，你能否多说一点：“将链接中的节点ID替换为相应节点对象的引用”？你能用我的例子展示吗？谢谢。 – derek

这就是你已经链接到的答案 - 而不是放入节点的编号，而是放入实际的节点本身。 –

这部分是创建一个唯一的ID在将数据绑定到DOM对象时使用。

(d) -> "#{d.source.id}_#{d.target.id}

我觉得这个代码就等于没有lambda表达式 -

node = nodesG.selectAll("circle.node") 
    .data(curNodesData, function(d) { return d.source.id + _ + d.target.id; });

来源

2015-04-16 19:33:51

我试过{return d.source.id +“_”+ d.target。id;}，可以显示图形，但链接的两端仍然由数组索引而不是ID属性索引。 – derek

D3强制布局：如何通过它的ID而不是索引在“节点”数组中索引数据

回答

相关问题