D3：对链接使用节点属性而不是数组中的索引

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();

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