[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:class-members-and-interest-group-relations":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用 Canvas-Slot DOM 锚点进行双向兴趣小组探索\n\n## 这个示例构建了什么\n这个示例构建的是一个学校活动关系看板，而不是传统的节点连线图。半透明的学校地图、可点击的位置图钉、左侧的兴趣小组列表以及右侧的班级成员列表，都渲染在同一个 relation-graph canvas 中。\n\n用户可以点击小组卡片或其地图图钉，以高亮匹配的成员，并绘制一条更粗、带动画效果的连线回到小组位置。他们也可以点击成员卡片，重新绘制从该成员到其加入的每个小组的连接层。这里的核心点在于，relation-graph 扮演的是自定义 HTML 界面的连接引擎，而不是可见节点的渲染器。\n\n## 数据如何组织\n数据位于两个内联数组中，并由 `loadDataFromRemote()` 加载到 React state。`interestGroups` 保存 `groupId`、显示名称以及地图图钉的 `{ x, y }` 坐标，而 `classMembers` 保存成员名称以及由多个 group id 组成的 `joinedGroups` 数组。\n\n这个示例中并没有真实的远程获取过程，也没有单独的",true,500,1782615398090]