D3强制布局 – 按名称而不是索引链接节点
我试图链接d3节点的ID而不是索引（节点ID由我的应用程序生成）。
这是我的节点：
"Nodes": [ { "Id": "338", "Name": "TEST NODE ONE", "Url": "http://www.google.com" }, { "Id": "340", "Name": "TEST NODE TWO", "Url": "http://www.yahoo.com" }, { "Id": "341", "Name": "TEST NODE THREE", "Url": "http://www.stackoverflow.com" }, { "Id": "342", "Name": "TEST NODE FOUR", "Url": "http://www.reddit.com" } ] 他们目前通过索引链接：
"links": [ { "source": 0, "target": 0, "value": "0" }, { "source": 0, "target": 1, "value": "0" }, { "source": 1, "target": 2, "value": "0" }, { "source": 3, "target": 2, "value": "0" } ]
但是，我想通过“Id”链接它们：
"Links": [ { "Source": "338", "Target": "338", "Value": "0" }, { "Source": "338", "Target": "340", "Value": "0" }, { "Source": "340", "Target": "341", "Value": "0" }, { "Source": "342", "Target": "341", "Value": "0" } ]
我尝试了这里提出的解决scheme： https ： //groups.google.com/forum/#!msg/d3-js/LWuhBeEipz4/0kZIojCYvhIJ
在调用force.nodes之前添加以下行：
// make links reference nodes directly for this particular data format: var hash_lookup = []; // make it so we can lookup nodes in O(1): json.Nodes.forEach(function(d, i) { hash_lookup[d.Id] = d; }); json.Links.forEach(function(d, i) { d.source = hash_lookup[d.Source]; d.target = hash_lookup[d.Target]; });
我试过debugging上述，但我无法设法弄清楚。 我得到以下错误信息（通常意味着我没有正确设置链接）：
Uncaught TypeError: Cannot read property 'weight' of undefined
链接到我的完整JS： http : //jsfiddle.net/9sMrw/
这是一个简单的方法来做到这一点：
var edges = []; json.Links.forEach(function(e) { var sourceNode = json.Nodes.filter(function(n) { return n.Id === e.Source; })[0], targetNode = json.Nodes.filter(function(n) { return n.Id === e.Target; })[0]; edges.push({ source: sourceNode, target: targetNode, value: e.Value }); }); force .nodes(json.Nodes) .links(edges) .start(); var link = svg.selectAll(".link") .data(edges) ...
这是一个工作的PLUNK 。 （你应该把它放在安全的地方，以防我不小心删除它。）
