[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:node-line-click-highlighting":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 人物关系图中的节点与连线点击高亮\n\n## 本示例构建了什么\n\n本示例在一个全高画布上构建了一个只读的人物关系图。每个人都以圆形头像配合彩色姓名标签的形式呈现，图谱会先以力导布局启动，再稳定下来，进入便于查看的静态视图。\n\n核心行为是由点击驱动的强调效果。点击节点会将与其相连的所有关系高亮为红色。点击连线会高亮该连线、淡化无关节点，并且只让两个端点节点保持完全可见。点击空白画布会恢复原始样式。这个示例最有价值的地方在于，这三种状态共享同一套可逆的重置流程，而不是通过重新构建图谱来实现。\n\n## 数据如何组织\n\n数据来自 `mock-data-api.ts` 中本地的 `jsonData` 对象，并通过异步的 `fetchJsonData()` 包装函数暴露，该函数会在 200 ms 后返回结果。返回数据使用标准的 `RGJsonData` 结构，包含 `rootId`、`nodes` 和 `lines`。在这个示例中，数据集包含 21 个节点和 42 条连线。节点存储 `id`、`text`、`color`、`borderColor`，以及一个包含头像 URL 和人物属性的 `dat",true,500,1782615425091]