[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:lazy-load-tree-children-on-expand":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 通过延迟加载子节点来展开树\n\n## 这个示例实现了什么\n\n这个示例构建了一棵自上而下的树，当用户展开已标记的节点时，树会继续增长。初始图数据被刻意保持得较小，然后在某个折叠分支按需请求更多后代节点时，把它们追加到现有的 relation-graph 实例中，而不是替换整份数据集。\n\n在界面上，用户会看到米色矩形节点、正交连接线、位于底部的展开控件，以及悬浮在画布上方的白色工具窗口。在异步展开期间，页面会显示加载遮罩，当前活动节点也会显示自己的 spinner 徽标，因此很容易识别正在解析的分支。\n\n这个演示最有价值的点不只是延迟加载本身，而是一次性分支加载、对新追加后代递归重复这一模式，以及在插入新片段后显式重新布局这三者的组合。\n\n## 数据如何组织\n\n这张图使用 `RGJsonData`，包含一个 `rootId`、一个扁平的 `nodes` 数组和一个扁平的 `lines` 数组。初始数据集在 `initializeGraph()` 中创建，其中有一个节点预先标记了 `expanded: false`、`expandHolderPosition: 'bottom'` 和 `d",true,500,1782615415339]