如何在Vega JS中实现树图节点的折叠与展开功能？

你的实现方向没有问题，该需求不属于Vega的功能限制，调整交互逻辑即可解决，无需编写多层父节点校验规则：

问题本质 #

你当前的expandedNodes数组仅记录用户手动点击展开/折叠的节点状态，没有处理「父节点折叠时，子节点的展开状态自动失效」的关联逻辑，导致存在无效的展开状态条目，进而触发渲染异常。

最优解决方案 #

1. 调整expandedNodes的更新规则 #

修改toggledNode信号触发时的expandedNodes更新逻辑：

• 当操作为展开节点时：正常将当前节点加入expandedNodes即可
• 当操作为折叠节点时：不仅要移除当前节点，还要同步将当前节点所有后代节点从expandedNodes中过滤删除
  你可以通过treeDescendants表达式获取节点的所有后代节点，直接批量过滤，不需要遍历操作。

2. 保留原有可见节点筛选逻辑 #

调整后expandedNodes内不会再存在「父节点已折叠、自身还在展开列表」的无效条目，你原来的visibleNodes筛选规则!datum.parent || indata('expandedNodes', 'name', datum.parent)完全可以正常适配任意层级的树结构，不需要修改。

备选方案（如果你需要保留子节点的展开状态记忆） #

如果需要折叠父节点再展开后，恢复之前子节点的展开状态，就换可见节点的校验逻辑：

1. 给每个节点新增变换，用treeAncestors获取所有祖先节点数组后，用flatten变换摊平为独立行
2. 新增聚合校验逻辑，判断该节点的所有祖先节点是否都在expandedNodes内，只要有一个不在就标记为隐藏
   该方案不需要调整expandedNodes的更新逻辑，同样可以适配任意层级的树结构。

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