[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:shortest-path-query":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 实时关系图上的最短路径查询\n\n## 本示例构建的内容\n\n这个示例在一个已经渲染完成的人物关系图之上构建了一个关系路径探索器。用户会看到一个由头像节点和带标签关系线组成的力导向画布，以及一个悬浮的白色查询窗口，用户可以在其中选择起始人物和目标人物。\n\n当两个端点都被选中后，示例会从实时的 `relation-graph` 实例中计算最短连接路径，并将结果应用回当前画布。当前路径会保持高亮，无关节点和连线会淡化为较低透明度，而同一个悬浮窗口还提供共享的画布设置和图片导出功能。\n\n## 数据如何组织\n\n加载后的图数据遵循 `RGJsonData` 结构，包含 `rootId`、`nodes` 数组和 `lines` 数组。每个节点都带有 `id`、显示文本、边框和填充颜色，以及存放在 `data.icon` 中的头像 URL。每条连线保存其两端节点、诸如 `teacher-student` 或 `relative` 这样的关系标签、显示颜色，以及放在 `data.type` 中的语义类型。\n\n在调用 `setJsonData()` 之前几乎没有做预处理：`fetchJsonData()`",true,500,1782615402569]