D3强制布局-按名称而不是按索引链接节点
D3强制布局-按名称而不是按索引链接节点
提问于 2014-06-02 10:09:07
我尝试通过ID而不是索引来链接d3节点(节点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"
}
]我尝试过这里提出的解决方案：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];
});我试过调试上面的代码，但是我想不通。我收到以下错误消息(这通常意味着我没有正确设置链接)：
Uncaught TypeError: Cannot read property 'weight' of undefined
链接到我的完整JS：http://jsfiddle.net/9sMrw/
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-02 12:04:23
以下是一种简单的方法：
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。(为了安全起见，您应该将其派生出来，以防我无意中将其删除。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23986466
复制相关文章
相似问题