d3.js树形布局 - 交叉链接

时间:2012-09-25 12:57:48

标签: graph d3.js tree visualization force-layout

我用d3创建了一个相互作用的交互式强制导向树。使用d3树布局创建节点和链接。

数据结构如下:

{
  "name": "node name",
  "id": 1,
  "children": [
    {
      "name": "child node name",
      "id": 2
    },
    {
      "name": "child node name",
      "id": 3
    },
    ...
  ]
},
...

节点/链接按以下方式创建:

var nodes = flatten(rootNode);
var links = d3.layout.tree().links(nodes);

为了启用树的双向遍历,我递归地从每个新创建的节点向下走树,并向所有节点添加父引用。

可以通过单击叶节点来扩展树。然后通过AJAX加载数据,并更新树。

这个问题是具有相同ID /名称的对象可能在树中多次出现。有没有办法从JavaScript代码中干净地合并所有重复的节点(由于交叉链接将树转换成图形)?

编辑:也许这样做的唯一方法就是走完整个树并重新链接指向重复的所有链接...虽然我认为这可能会减慢脚本速度大大减少...

1 个答案:

答案 0 :(得分:0)

我看到......如何保留所有可用树节点的附加列表?这样您就不必递归遍历层次结构。