d3.js 树布局 - 交叉链接答案

【问题标题】：d3.js Tree Layout - Cross Linksd3.js 树布局 - 交叉链接
【发布时间】：2012-09-17 00:01:50
【问题描述】：

我用 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 代码中干净地合并所有重复节点（由于交叉链接，这会将树转换为图形）？

编辑：也许这样做的唯一方法是走下整个树并重新链接指向副本的所有链接......虽然我认为这可能会减慢脚本大幅下降...

【问题讨论】：

你有更好的可视化效果的 jsfiddle 吗？
@manu：由于动态 AJAX 调用，很难复制...我不需要实际代码作为答案，这更像是一个概念性问题 :)
只是为了理解：每个节点都有其唯一的ID吗？之后，每个节点可以放在多个父节点下面吗？
@manu 每个节点都应该有一个唯一的 id。问题是两个具有相同 id 的节点（这意味着它们是同一个数据库对象）在加载更多数据后可以在树中，因此它们应该合并，包括所有链接。

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

【解决方案1】：

我明白了...保留一个包含所有可用树节点的附加列表怎么样？这样您就不必递归地遍历层次结构。

【讨论】：

问题不在于遍历（我可以使用flatten() 函数获得所有节点的平面列表），而是如何检测重复项并将它们链接在一起，同时（如果可能）保持基本的树形布局。我认为可能有一种干净的 d3 方法可以做到这一点。