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: 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

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

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

我认为这段代码在没有lambda表达式的情况下是等价的 -

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

D3强制布局：如何在＆＃34;节点＆＃34;中按ID而不是索引来索引数据。排列

1 个答案: