使用 Canvas-Slot DOM 锚点进行双向兴趣小组探索

这个示例构建了什么

这个示例构建的是一个学校活动关系看板，而不是传统的节点连线图。半透明的学校地图、可点击的位置图钉、左侧的兴趣小组列表以及右侧的班级成员列表，都渲染在同一个 relation-graph canvas 中。

用户可以点击小组卡片或其地图图钉，以高亮匹配的成员，并绘制一条更粗、带动画效果的连线回到小组位置。他们也可以点击成员卡片，重新绘制从该成员到其加入的每个小组的连接层。这里的核心点在于，relation-graph 扮演的是自定义 HTML 界面的连接引擎，而不是可见节点的渲染器。

数据如何组织

数据位于两个内联数组中，并由 loadDataFromRemote() 加载到 React state。interestGroups 保存 groupId、显示名称以及地图图钉的 { x, y } 坐标，而 classMembers 保存成员名称以及由多个 group id 组成的 joinedGroups 数组。

这个示例中并没有真实的远程获取过程，也没有单独的