[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:character-relationship-graph-operations":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 以节点为中心操作的人物关系图\n\n## 这个示例构建了什么\n\n这个示例构建了一个力导向的人物关系图，它的行为更像一个轻量级编辑工作区，而不是只读的网络视图。画布以一份预先准备好的角色关系数据集为起点，将每个人渲染为圆形头像节点，并在选中节点上叠加一个以节点为中心的径向菜单，以及一个固定在侧边的节点编辑面板。\n\n用户可以点击节点打开上下文操作，在原位重命名节点、复制节点、添加新的子节点、启动交互式连线创建，或打开一个详情卡片，实时编辑颜色和头像 URL。最重要的一点是，这个覆盖层 UI 并不是脱离图状态独立存在的：它锚定在被选中的节点上，并通过 relation-graph 实例 API 驱动真实的图变更。\n\n## 数据是如何组织的\n\n数据集在 `mock-data-api.ts` 中被模拟为异步 `RGJsonData`。它定义了 `rootId: \"N13\"`、一组人物节点，以及带标签的关系线，例如 `friend`、`relative`、`lover`、`collusion`、`corruption` 和 `report`。每个节点都包含 `id`、`text`、`color`、",true,500,1782615402266]