[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:click-related-node-group-highlights":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用 Canvas 矩形实现点击驱动的相关节点分组高亮\n\n## 这个示例构建了什么\n\n这个示例构建了一个力导布局网络查看器，使用持久化的 canvas 层矩形来标记节点邻域。图谱初始会预置三个高亮分组，每个已保存的分组都会围绕一个核心节点以及 relation-graph 返回的相关节点，绘制一个圆角半透明轮廓。\n\n用户可以继续点击更多节点来新增一个高亮邻域，同时对比最多三个分组，并且仍然可以继续与图谱交互，因为这些覆盖层不会捕获指针输入。这个示例的重点在于，高亮是通过一个独立的 SVG 覆盖层来实现的，而不是直接修改节点和连线样式。\n\n## 数据如何组织\n\n基础图数据是一个内联的 `RGJsonData` 对象，其中包含 `rootId`、扁平的 `nodes` 数组和扁平的 `lines` 数组。内容是一个以 `a` 为根节点的通用分支网络，因此这个示例可复用的价值不在于领域建模，而在于叠加在普通 relation-graph 数据集之上的运行时分组模式。\n\n在执行 `setJsonData(...)` 之前，唯一的预处理步骤是为每条连线对象添加 `id: line-${idx",true,500,1782615432101]