[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:node-neighborhood-group-background":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在力导向图中绘制实时邻域背景区域\n\n## 此示例构建的内容\n\n这个示例构建了一个全高的 relation graph 查看器，具备力导向运动效果和持久化的邻域高亮。画布初始时就会显示三个已保存的分组，每个分组都会作为半透明的绿色背景，出现在一组相关节点的后方。\n\n用户点击任意节点时，都可以为该节点及其相关节点创建另一个已保存的高亮区域。这里最重要的思路是，分组效果并不会直接重设节点或连线的样式，而是额外添加一个独立的画布层叠加层，并让它跟随节点的实时位置变化。\n\n## 数据如何组织\n\n图数据以内联 `RGJsonData` 的形式声明在 `initializeGraph()` 中。每个节点只保存 `id` 和 `text`，每条连线一开始只是简单的 `{ from, to }` 结构，之后再通过最后一次 `.map(...)` 处理生成所需的连线 id。\n\n在调用 `setJsonData(...)` 之前几乎没有任何预处理。唯一的数据变换就是自动生成连线 id，而分组状态完全没有嵌入到数据集中。分组成员是在运行时通过 `getNodeById(...)` 和 `getNodeRe",true,500,1782615431788]