如何实现D3 collapsible force layout默认仅展开指定节点

实现原理：D3 分层数据默认通过children属性控制节点展开状态，_children属性用于存储折叠隐藏的子节点，你只需要在初始化层级数据后，把不需要默认展示的节点的子节点从children转移到_children即可。

修改步骤 #

找到代码中var root = d3.hierarchy(data);这一行，在其后添加如下代码：

// 按层级过滤需要默认展开的节点：深度0为根节点「最佳实践」，深度1为直接子节点「课程结构」「工具」，其余层级默认折叠
root.descendants().forEach(node => {
  if (node.depth > 1 && node.children) {
    node._children = node.children;
    node.children = null;
  }
});

效果说明 #

• 页面加载完成后默认仅展示「最佳实践」「课程结构」「工具」三个节点
• 原有的双击展开/折叠逻辑无需修改，双击对应节点即可按需展开下级内容
• 节点的拖拽、力导向布局效果不受任何影响

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