以节点为中心操作的人物关系图

这个示例构建了什么

这个示例构建了一个力导向的人物关系图，它的行为更像一个轻量级编辑工作区，而不是只读的网络视图。画布以一份预先准备好的角色关系数据集为起点，将每个人渲染为圆形头像节点，并在选中节点上叠加一个以节点为中心的径向菜单，以及一个固定在侧边的节点编辑面板。

用户可以点击节点打开上下文操作，在原位重命名节点、复制节点、添加新的子节点、启动交互式连线创建，或打开一个详情卡片，实时编辑颜色和头像 URL。最重要的一点是，这个覆盖层 UI 并不是脱离图状态独立存在的：它锚定在被选中的节点上，并通过 relation-graph 实例 API 驱动真实的图变更。

数据是如何组织的

数据集在 mock-data-api.ts 中被模拟为异步 RGJsonData。它定义了 rootId: "N13"、一组人物节点，以及带标签的关系线，例如 friend、relative、lover、collusion、corruption 和 report。每个节点都包含 id、text、color、