在保留上下文的同时过滤角色关系图

此示例构建的内容

此示例构建了一个只读的人物关系查看器，包含力导向画布、头像风格节点、带标签的关系连线、全宽过滤栏以及一个悬浮辅助窗口。图谱会填满页面高度，保持完整角色集合可见，并将 teacher-student、relative、collusion 和 report 等关系直接展示在连线路径上。

用户可以按性别、角色立场和关系类型缩小查看范围。这里的关键行为是，不匹配的项目会被降低透明度而不是移除，因此图谱仍会保留周边上下文，同时让当前激活的子集更加突出。

数据组织方式

该示例从 mock-data-api.ts 加载一个 RGJsonData 对象。它使用扁平的 nodes 数组和扁平的 lines 数组，并以 rootId: "N13" 作为锚点 id。每个节点都包含 id、text、color、borderColor 和一个 data 对象，其中承载了可过滤字段：gender、isGoodMan 和 icon。每条连线都包含 from、to、