如何实现点击按钮展开/折叠D3.js树形图表

嘿，我懂你现在的需求啦——已经把D3树形图开发完成，各项功能都正常运行，现在就差加两个全局按钮：点击「展开」就把整个图表全部展开，点击「折叠」就把所有节点收起来，效果要和手动点击顶层节点完全一致对吧？这事儿不难，我给你一步步拆解怎么实现：

首先，先在你的HTML里添加上这两个按钮，放在树形图容器的上方或者你觉得合适的位置就行：

<!-- 可以放在你的SVG树形图容器之前或之后 -->
<button id="expand-all">展开</button>
<button id="collapse-all">折叠</button>

接下来是核心的JavaScript逻辑。先明确一下：D3树形图的展开折叠通常是靠节点的children和_children属性控制的——children是当前显示的子节点，_children是被隐藏起来的子节点。假设你现有代码里已经有了处理节点点击的click函数和更新图表渲染的update函数（这俩是D3树形图的标准配置），那我们可以写两个专门的函数来实现全局展开/折叠：

// 全局展开函数：递归展开所有节点，和点击顶层节点到展开状态的效果完全一致
function expandAll() {
  // 递归遍历节点，把隐藏的子节点恢复为显示状态
  function expandNode(d) {
    if (d._children) {
      d.children = d._children;
      d._children = null;
      // 递归处理子节点，确保全部展开
      d.children.forEach(expandNode);
    }
  }
  // 从根节点开始执行展开逻辑
  expandNode(root);
  // 更新图表渲染
  update(root);
}

// 全局折叠函数：递归折叠所有节点，和点击顶层节点到折叠状态的效果完全一致
function collapseAll() {
  // 递归遍历节点，把显示的子节点隐藏起来
  function collapseNode(d) {
    if (d.children) {
      d._children = d.children;
      // 递归处理子节点，确保全部折叠
      d._children.forEach(collapseNode);
      d.children = null;
    }
  }
  // 从根节点开始执行折叠逻辑
  collapseNode(root);
  // 更新图表渲染
  update(root);
}

// 给按钮绑定点击事件
d3.select('#expand-all').on('click', expandAll);
d3.select('#collapse-all').on('click', collapseAll);

要是你不想写递归函数，也可以直接模拟点击顶层节点的行为——不过这种方式要确保顶层节点的DOM已经渲染完成：

// 展开按钮：模拟手动点击顶层节点
d3.select('#expand-all').on('click', function() {
  // 获取第一个.node元素（也就是树形图的顶层节点）
  const rootNode = d3.select('.node').node();
  // 触发点击事件，和手动点击效果完全一致
  rootNode.dispatchEvent(new Event('click'));
});

// 折叠按钮：如果需要强制折叠，直接调用上面的collapseAll函数更稳妥
d3.select('#collapse-all').on('click', collapseAll);

这里要注意：root是你的树形图根数据对象，update是你现有代码里用来更新图表布局和渲染的函数——这俩应该是你已经写好的，直接复用就行。

这样配置完之后，点击「展开」按钮就会把整个树形图完全展开，点击「折叠」按钮就会把所有节点收起来，效果和你手动点击顶层节点完全一致~

内容的提问来源于stack exchange，提问作者A prasad