[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:search-and-focus":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 搜索关系图并聚焦选中的节点\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高的人物关系查看器，在图谱画布上方带有一个浮动搜索面板。图中展示了基于头像的人物节点、带标签的直线关系，以及一个可拖拽、可最小化、也可切换到设置视图的共享工具窗口。\n\n用户可以输入部分人名，选择过滤后的结果，然后看到视口通过一个简短动画跳转到对应节点。这个示例的重点不是图编辑或路径分析，而是定位器模式：从已加载的图中派生出搜索 UI，再利用这个 UI 快速导航画布。\n\n## 数据是如何组织的\n\n图数据来自 `mock-data-api.ts` 中本地静态的 `RGJsonData` 负载。它包含 `rootId`、`nodes` 数组和 `lines` 数组。每条节点记录都带有 `id`、`text`、`color`、`borderColor` 以及一个 `data` 对象，其中包含人物属性，例如 `gender`、`isGoodMan`，还有供自定义头像插槽使用的 `icon` URL。每条连线记录使用 `from`、`to`、`text`、`color`、`fontColor` 和 `data.typ",true,500,1782615421990]