14

我是从事网络可视化工作的 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当我创建力时，该属性会被覆盖。

我读了这个问题，但那里唯一的答案似乎有点骇人听闻。他们还提到了“数据键”，但我在这些方面找不到太多，而且我不知道如何合并它们，因为我实际上并没有使用该enter()功能。

4

1 回答 1

22

我不认为您可以强制 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();

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

于 2013-05-29T22:21:57.697 回答