顺序树组布局
这个示例读取一棵本地层级树,将一级分支拆分为独立 relation-graph 分组,并在固定画布内为每组应用各自的左到右 folder 布局。随后它会把共享根节点重新居中到合并边界上方,添加仅展示用正交连接线,并在分支展开/收起时重新执行整体组合布局。
在共享根节点下组合顺序树分组
这个示例构建了什么
这个示例构建了一个只读层级查看器:在一个较大的 All Departments 根节点之下,将多个一级子树分组按水平方向排成一行。每个分组都来自同一棵源树,但画布通过从共享根节点到各分组根节点绘制独立的、仅用于展示的正交连接线,将它们呈现为一张图。
用户可以展开或折叠分支,使用内置工具栏和小地图进行导航,拖动或最小化浮动说明窗口,在设置抽屉中切换画布滚轮和拖拽模式,并将图导出为图片。这个示例的核心启发是布局组合:虽然辅助文字提到了多种树方向,但审查后的代码实际上对每个分组都使用了相同的、从左侧起始的 folder 布局,重点在于如何在一张固定图中把这些分组组合排列起来。
数据如何组织
源数据是一个本地嵌套树对象,包含 id、text 和 children,由 getMyTreeJsonData() 异步返回。整体根节点并不是通过把完整层级传给 setJsonData(...) 来渲染的。相反,analysisGroups(...) 会取出根节点的一级子节点,并把每棵子树转换成独立