[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:runtime-graph-controls":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 力导向人物关系图上的运行时图谱控制\n\n## 这个示例构建了什么\n\n这个示例构建了一个全屏人物关系图，并在其上方叠加了一个可拖拽的工具窗口。图谱使用头像作为节点图像、使用带标签的直线表示关系，并采用力导向布局，使整个网络保持动态且自然的排布，而不是固定树形或网格结构。\n\n面向用户的体验核心是运行时控制。这个悬浮窗口可以将视口跳转到特定人物、执行带动画的定位操作、降低某个节点的不透明度、把一个节点移动到另一个节点附近、在图谱已经加载后再添加 follower 节点、切换画布拖拽与滚轮行为，以及将图谱导出为图片。\n\n最重要的一点是，这些行为并不是通过单独的 demo 或画布内编辑器覆盖层实现的。一个外部控制面板会针对同一个实时图谱，驱动多个 `graphInstance` API。\n\n## 数据是如何组织的\n\n这个示例从 `mock-data-api.ts` 加载本地 `RGJsonData` 对象。数据包含一个 `rootId`、一个 `nodes` 数组和一个 `lines` 数组。每个节点都带有图谱核心字段，例如 `id`、`text`、`color` 和 `borderColor",true,500,1782615421615]