[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:sequential-tree-group-layout":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在共享根节点下组合顺序树分组\n\n## 这个示例构建了什么\n\n这个示例构建了一个只读层级查看器：在一个较大的 `All Departments` 根节点之下，将多个一级子树分组按水平方向排成一行。每个分组都来自同一棵源树，但画布通过从共享根节点到各分组根节点绘制独立的、仅用于展示的正交连接线，将它们呈现为一张图。\n\n用户可以展开或折叠分支，使用内置工具栏和小地图进行导航，拖动或最小化浮动说明窗口，在设置抽屉中切换画布滚轮和拖拽模式，并将图导出为图片。这个示例的核心启发是布局组合：虽然辅助文字提到了多种树方向，但审查后的代码实际上对每个分组都使用了相同的、从左侧起始的 `folder` 布局，重点在于如何在一张固定图中把这些分组组合排列起来。\n\n## 数据如何组织\n\n源数据是一个本地嵌套树对象，包含 `id`、`text` 和 `children`，由 `getMyTreeJsonData()` 异步返回。整体根节点并不是通过把完整层级传给 `setJsonData(...)` 来渲染的。相反，`analysisGroups(...)` 会取出根节点的一级子节点，并把每棵子树转换成独立",true,500,1782615389681]