[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:character-relationship-graph-filters":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在保留上下文的同时过滤角色关系图\n\n## 此示例构建的内容\n\n此示例构建了一个只读的人物关系查看器，包含力导向画布、头像风格节点、带标签的关系连线、全宽过滤栏以及一个悬浮辅助窗口。图谱会填满页面高度，保持完整角色集合可见，并将 `teacher-student`、`relative`、`collusion` 和 `report` 等关系直接展示在连线路径上。\n\n用户可以按性别、角色立场和关系类型缩小查看范围。这里的关键行为是，不匹配的项目会被降低透明度而不是移除，因此图谱仍会保留周边上下文，同时让当前激活的子集更加突出。\n\n## 数据组织方式\n\n该示例从 `mock-data-api.ts` 加载一个 `RGJsonData` 对象。它使用扁平的 `nodes` 数组和扁平的 `lines` 数组，并以 `rootId: \"N13\"` 作为锚点 id。每个节点都包含 `id`、`text`、`color`、`borderColor` 和一个 `data` 对象，其中承载了可过滤字段：`gender`、`isGoodMan` 和 `icon`。每条连线都包含 `from`、`to`、",true,500,1782615401932]