[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:whole-graph-expand-collapse-playback":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 居中层级中的整图展开/折叠回放\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高度的居中层级查看器，它会对整张图的分支可见性进行回放，而不是把展开操作留给单个节点点击。画布展示的是一个以根节点为中心、类似子系统结构图的关系图，包含橙色圆形节点、灰色直线标签连线，以及悬浮在图上方的白色辅助窗口。\n\n用户可以回放 `Expand All` 和 `Collapse All`，拖动辅助窗口、将其最小化，并打开一个次级设置浮层。该浮层来自共享的本地辅助组件，提供滚轮模式、拖动画布模式和图片下载控制，但这个示例的重点是脚本化的整图回放：它会重置层级结构、按自上而下的顺序执行展开动画，并且还能基于同一份数据执行从叶子节点开始的折叠。\n\n## 数据是如何组织的\n\n数据在 `initializeGraph()` 内以内联方式声明为一个 `RGJsonData` 对象。它使用 `rootId: '2'`，定义了 39 个硬编码节点，并通过 38 条显式连线将它们连接起来。节点记录只需要 `id` 和 `text`，而连线记录只需要 `id`、`from`、`to` 以及重复出现的标签 `Subsy",true,500,1782615428332]