インデックスではなく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/
これを行う簡単な方法は次のとおりです。
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)
...
これが機能しています [〜#〜]プランク[〜#〜] 。 (私がうっかり削除してしまった場合に備えて、安全のためにフォークする必要があります。)