节点邻域分组背景
这个示例加载力导关系图,预置三个邻域分组,并允许用户点击任意节点创建新的邻域高亮。每个高亮都会在画布层绘制为基于实时节点边界的 SVG 区域:单节点组用矩形,多节点组用凸包轮廓。
在力导向图中绘制实时邻域背景区域
此示例构建的内容
这个示例构建了一个全高的 relation graph 查看器,具备力导向运动效果和持久化的邻域高亮。画布初始时就会显示三个已保存的分组,每个分组都会作为半透明的绿色背景,出现在一组相关节点的后方。
用户点击任意节点时,都可以为该节点及其相关节点创建另一个已保存的高亮区域。这里最重要的思路是,分组效果并不会直接重设节点或连线的样式,而是额外添加一个独立的画布层叠加层,并让它跟随节点的实时位置变化。
数据如何组织
图数据以内联 RGJsonData 的形式声明在 initializeGraph() 中。每个节点只保存 id 和 text,每条连线一开始只是简单的 { from, to } 结构,之后再通过最后一次 .map(...) 处理生成所需的连线 id。
在调用 setJsonData(...) 之前几乎没有任何预处理。唯一的数据变换就是自动生成连线 id,而分组状态完全没有嵌入到数据集中。分组成员是在运行时通过 getNodeById(...) 和 `getNodeRe