[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:append-graph-data-in-stages":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 分阶段追加图谱数据\n\n## 此示例构建了什么\n\n这个示例渲染了一个居中的关系图谱：它从一个中心节点和一小组已连接节点开始。一个浮动辅助窗口允许用户在不替换当前已显示图谱的前提下，继续追加第二层数据，再追加第三层数据。\n\n视觉结果被刻意保持得很简单：暖米色节点、直线连接器，以及几乎没有额外装饰的全高画布。这个示例的重点是分阶段揭示流程。它不是通过点击节点来展开分支，而是使用明确的产品控件，按固定顺序释放更多图谱结构。\n\n## 数据如何组织\n\n图谱数据在 `MyGraph.tsx` 中被拆分为三个内联的 `RGJsonData` 片段，并且三者都使用 `rootId: '2'`。第一份载荷包含初始的七个节点和六条带标签的连线。第二份载荷围绕现有节点 `7`、`8`、`9` 和 `1` 等添加更多实体，第三份载荷则在节点 `5` 下追加五个子节点。\n\n在调用 `setJsonData()` 或 `appendJsonData()` 之前，没有任何预处理流水线。每个片段都直接声明为字面量形式的 `nodes` 和 `lines` 数组，然后直接传给图谱实例。在业务应用中，相同的结构可以来自",true,500,1782615415027]