D3：对链接使用node属性，而不是在数组中使用index [英] D3: Using node attribute for links instead of index in array

问题描述

我是一个D3.js初学者在网络可视化，我不知道如何正确指定我的链接为力布局。问题是，默认情况下，d3将链接的源和目标解释为nodes数组中的节点的索引。但是，在我的数据中，源和目标指的是节点的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 [i] .index = nodes [i] .id; 
 console.log（i ++ nodes [i] .index ++ nodes [i] .id）; 
} 
  

...但索引属性只是在创建力时被覆盖。

我阅读了这个问题，但唯一的答案似乎有点黑客。他们还提到数据键，但我不能找到很多，我不知道如何将它们，因为我没有使用 enter（）

> node.id 作为索引，但您可以处理链接以具有正确的引用：

  var edges = []; 
 
 data.edges.forEach（function（e）{
 //获取源和目标节点
 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] 
 
 //将边添加到数组
 edges.push（{source：sourceNode，target：targetNode}）; 
}）; 
 
 var force = d3.layout.force（）
 .nodes（data.nodes）
 .links（edges）
 //其余的代码在这里
 .start（）; 
  

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

I'm a D3.js beginner working on a network visualization, and I can't figure out how to properly specify my links for the force layout. The problem is that by default, d3 interprets the "source" and "target" of the links to be the indices of the nodes in the "nodes" array. However, in my data, the source and target refer to the id numbers of the nodes, which I've stored in a node attribute. How do I get the links to point to node.id instead of node.index? Here is where I guess I should do it:

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

... but I'm not sure if I should be modifiying the .nodes() part or the .links() part. I tried adding this just before it:

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

... but the index attribute just gets overwritten when I create the force.

I read this question, but the only answer there seems like a bit of a hack. They also mention "data keys", but I can't find much on those, and I don't know how I would incorporate them, since I'm not actually using the enter() function.

解决方案

I don't think that you can force D3 to use the attribute node.id as index, but you can process the links to have the right references:

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

The force layout overwrite the index if you set it, but will keep the references for the source and target of each node in the links.

这篇关于D3：对链接使用node属性，而不是在数组中使用index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！