d3.js - D3 : Using node attribute for links instead of index in array

Question

我是一名从事网络可视化工作的 D3.js 初学者，我不知道如何为力布局正确指定我的链接。问题是，默认情况下，d3 将链接的“源”和“目标”解释为“节点”数组中节点的索引。但是，在我的数据中，源和目标是指节点的 id 号，我已将其存储在节点属性中。如何获得指向 node.id 的链接而不是 node.index ?这是我想我应该这样做的地方:

var nodes = data.nodes;
var edges = data.edges;
var force = d3.layout.force()
            .nodes(d3.values(nodes))
            .links(edges)
            .size([w, h])
            .linkDistance(80)
            .charge(-500)
            .gravity(0.2)
            .on("tick", tick)
            .start();

...但我不确定我是否应该修改 .nodes()部分或 .links()部分。我尝试在它之前添加它:

var nodes = data.nodes;
for (var i = 0; i < nodes.length; i++) {
    nodes[i].index = nodes[i].id;
    console.log(i + " " + nodes[i].index + " " + nodes[i].id);
}

... 但是 index当我创建力时，属性会被覆盖。

我读了 this问题，但唯一的答案似乎有点黑客。他们还提到了“数据键”，但我找不到太多关于这些的信息，我不知道如何合并它们，因为我实际上并没有使用 enter()功能。

Answer 1

我不认为你可以强制 D3 使用属性 node.id作为索引，但您可以处理链接以获得正确的引用:

var edges = [];

data.edges.forEach(function(e) { 
    // Get the source and target nodes
    var sourceNode = data.nodes.filter(function(n) { return n.id === e.source; })[0],
        targetNode = data.nodes.filter(function(n) { return n.id === e.target; })[0];

    // Add the edge to the array
    edges.push({source: sourceNode, target: targetNode});
});

var force = d3.layout.force()
    .nodes(data.nodes)
    .links(edges)
    // the rest of your code here
    .start();

如果设置了强制布局，它会覆盖索引，但会保留链接中每个节点的源和目标的引用。