d3.js - D3强制布局: How to index data by its ID instead of its index in "nodes" array

Question

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

{
    "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;})

谢谢德里克

Answer 1

这部分创建一个唯一的 id，用于将数据绑定(bind)到 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; });