D3强制布局:如何通过其ID而不是"nodes"数组中的索引来索引数据

Question

我正在玩D3力量布局.在强制布局中,您必须提供"链接"和"节点"才能生成强制图.D3将链接的"源"和"目标"解释为"节点"数组中节点的索引.我的问题是:如何通过"nodes"属性中的ID而不是"nodes"数组中的索引来索引数据？这是我的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:在链接中使用节点属性而不是数组中的索引

但解决方案不是我想要的.因为最近我看到一些人只是通过一个简单的键函数来做特殊的索引:

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，用于将数据绑定到 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; });