在D3.js中,您如何以可折叠力布局交叉连接儿童?

时间:2014-03-28 20:09:33

标签: javascript d3.js

我们一直在努力构建基于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...

结果显示“树状”链接符合预期,但不是所谓的“儿童之间的交叉链接”:

enter image description here

如果我删除,例如“树状”链接“barbara-carl”,则会显示“diane-carl”链接。

显然可以构建一个使用图形的力布局,但我已经试图弄清楚我们哪里出错了。 (另一个想法是我在代码的不同区域犯了错误,但我不想发布整个程序并说“有人可以调试吗?”)

0 个答案:

没有答案