我们一直在努力构建基于this example in the D3.js gallery的可折叠力布局。
但是,我们的数据是图表,而不是树。例如:
root = {
"name": "adam",
"children": [
{
"name": "barbara",
"children" : [
{ "name" : "carl" }
]
},
{
"name": "diane",
},
{
"name": "edward"
}
]
};
// name * name * [node] -> { source : node, target : node}
function crossLink(fst, snd, nodes) {
var fstNode = nodes.filter(function (n) { return n.name === fst; })[0];
var sndNode = nodes.filter(function (n) { return n.name === snd })[0];
return { "source" : fstNode, "target" : sndNode };
}
function buildGraph() {
//flatten() is from Bostock's original, returns all nodes
var nodes = flatten(root);
//Encode the tree-like aspect of the data
var links = [
crossLink("adam", "barbara", nodes),
crossLink("barbara", "carl", nodes),
crossLink("adam", "diane", nodes),
crossLink("adam", "edward", nodes),
];
//Cross-links amongst children
//(These don't appear if a child is already linked to by a parent)
links.push(crossLink("barbara", "diane", nodes));
links.push(crossLink("diane", "edward", nodes));
links.push(crossLink("diane", "carl", nodes));
...etc...
结果显示“树状”链接符合预期,但不是所谓的“儿童之间的交叉链接”:
但如果我删除,例如“树状”链接“barbara-carl”,则会显示“diane-carl”链接。
显然可以构建一个使用图形的力布局,但我已经试图弄清楚我们哪里出错了。 (另一个想法是我在代码的不同区域犯了错误,但我不想发布整个程序并说“有人可以调试吗?”)