在 d3.js 中折叠/展开树的子节点？答案

【问题标题】：Collapse/expand child nodes of tree in d3.js?在 d3.js 中折叠/展开树的子节点？
【发布时间】：2012-03-21 10:35:14
【问题描述】：

我正在构建一个树形结构（或者更确切地说，使用我自己的 json 中的一组我自己的数据修改其中一个示例）并且我正在尝试创建一些功能：

我的树的布局是树示例中的布局： http://mbostock.github.com/d3/ex/cluster.html

我正在添加（到圈子中）一个 onclick 事件，我想折叠被点击节点的子节点。也就是说，当用户点击与某个节点关联的钢蓝色圆圈时，我希望该节点的子节点消失。

我已经浏览了文档，但没有发现任何可以让我让节点崩溃或消失的东西。

我能做什么？

【问题讨论】：

标签： d3.js hierarchy force-layout

【解决方案1】：

有这个：

http://mbostock.github.com/d3/talk/20111018/tree.html

我的SVG Open keynote 中还有许多其他交互式分层布局示例。

【讨论】：

哇..这就是..正是我想要的。谢谢。
同意。谢谢你，漂亮的工具。如果可以的话，我会给它+2
@mbostock 非常感谢精彩的可视化。您在bl.ocks.org/mbostock/4339083 的工作版本可能更容易让其他用户适应

【解决方案2】：

有几种方法，一种是使用常规样式来隐藏子项的标记（不透明度：0，或显示：无）。但是，这只是使数据不可见，树保持其形状，就好像数据在那里一样，您只是看不到它。

通常您会希望树假装数据不存在并相应更新，因为您可以使用与上述链接中的强制导向布局示例相同的方法。

归结为： 1）使用函数构建d3树 2) 将点击事件附加到可折叠节点 3) click 事件重命名节点的 children 属性并调用 1) 中的函数重绘没有该节点子节点的树。

这里是来自 nkoren 答案中链接的相关代码 (http://bl.ocks.org/1062288)：

function update() { 
    // build the tree layout here
    //  append on("click", click) to the collapsible nodes
}

// Toggle children on click
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

【讨论】：

【解决方案3】：

很遗憾，我仍在了解 D3，但不知道如何最好地回答您的问题。但这是一个强制导向的布局，它允许您通过单击它们来显示/隐藏节点，这可能会给您一些想法：http://bl.ocks.org/1062288

【讨论】：

强制定向布局适用于图形可视化，但不适用于树。
如果您查看源代码，您会发现它是强制导向的布局并不重要，相同的解决方案可用于任何 DAG（即图中没有循环），其中包括树木。我将在特定答案中添加特定代码（以防链接最终断开）。