寻求带摘要功能的JavaScript思维导图布局算法资料（已实现d3基础布局）

核心布局逻辑梳理 #

XMind的摘要节点核心是将指定节点集合聚合为一个包裹型父节点，同时维持原思维导图的层级视觉流，需解决两个关键问题：

• 计算摘要节点的边界框：需完全覆盖所有被摘要节点（含其连线、子节点）的空间范围，预留合理内边距
• 适配现有布局：插入摘要节点后，不破坏原有节点的层级关系，同时保证摘要与被包裹节点的视觉关联

相关学术论文参考 #

• 《Tree Visualization with Node Aggregation》：提出节点聚合树形可视化框架，包含边界框计算、层级调整的数学模型，是摘要布局的理论基础
• 《Interactive Aggregation for Hierarchical Data》：聚焦交互式树形数据的聚合布局，提供动态添加/移除聚合节点时的布局重排算法，适配思维导图的交互场景
• 《Compact Tree Layouts with Aggregation Nodes》：针对紧凑树形布局，给出聚合节点与子节点的空间分配策略，可直接适配d3-flextree这类基于空间约束的布局工具

现有实现参考（技术思路） #

• 开源思维导图库（如Mindmup、OrgChart）的节点分组功能：通过遍历目标子节点的坐标范围计算分组节点宽高，将分组节点插入父层级后调整相邻节点间距
• d3社区自定义扩展案例：基于d3-hierarchy的sum和eachAfter方法，扩展计算聚合节点的边界框，重写布局的节点位置计算逻辑，实现包裹式聚合

基于d3-flextree的代码实现思路 #

1. 数据结构扩展：为摘要节点添加isSummary属性，关联被摘要的子节点ID列表
2. 计算摘要节点尺寸：遍历被摘要的子节点，用d3.extent获取所有子节点的x/y坐标极值，计算摘要节点的宽（maxX - minX + 2*padding）和高（maxY - minY + 2*padding）
3. 适配d3-flextree布局：在节点尺寸计算函数中，对isSummary为true的节点返回预计算的宽高，替代默认的内容尺寸
4. 调整层级关系：将被摘要子节点的父节点指向摘要节点，绘制时可保留原层级的虚线连线（还原XMind的视觉风格）
5. 重排整体布局：调用d3-flextree的recompute方法重新计算布局，确保摘要节点与其他节点的间距符合紧凑要求

实用技术资料 #

• d3-hierarchy官方文档的节点聚合示例：提供了计算节点后代边界的基础方法，可作为扩展摘要功能的起点
• 《D3.js in Action》第3章：讲解树形布局的自定义扩展，包含节点尺寸动态计算、布局重排的实战代码

内容的提问来源于stack exchange，提问作者weichao.x