[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:expand-graph-step-by-step":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 深度优先树展开回放\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高树形查看器，它会从根节点向外回放整个层级结构，而不是等待用户点击展开控件。屏幕上展示的是一个带有矩形节点和曲线标签连线的树图，并且图会在组件挂载后立即自动展开。\n\n这个示例的核心在于回放行为。代码会先加载完整的层级结构，折叠所有仍然有子节点的分支，然后通过短暂停顿让树一步步展开。在这个过程中，视口会持续重新居中并适配当前可见图形，以保证展开过程始终清晰可读。\n\n## 数据是如何组织的\n\n数据直接在 `initializeGraph()` 内以内联方式声明，采用标准的 `RGJsonData` 风格树形载荷结构，包含 `rootId`、`nodes` 和 `lines`。每个节点都是简单的 `{ id, text }` 对象，每条边都是 `{ from, to, text }` 关系，并用 `Subsystem` 作为连接标签。\n\n在把数据传给 `setJsonData()` 之前，示例会先遍历 `lines` 数组，并为每条连线补充一个合成 `id`，例如 `line_0` 或 `line_1`。这里没有远程获",true,500,1782615428669]