节点悬停高亮关联线条
这个示例渲染一棵自上而下树图,仅高亮悬停节点及其直接连接连线。它演示 `RGSlotOnNode` 悬停事件、通过 `getLines()` 进行运行时邻接查询、临时节点与连线 class 更新、SCSS 动画线样式,以及共享悬浮工具面板的画布设置与图片导出。
节点悬停时高亮相关连线
此示例构建了什么
这个示例构建了一个全高树形查看器,当指针移到某个节点上时,会强调该节点的直接关系。屏幕上展示的是一个自上而下的小型层级结构,包含以字母标记的条目、圆角紫色节点标签,以及正交连接线,画布上方还叠加了一个悬浮辅助窗口。
最主要的可见效果是临时关系高亮。悬停某个节点时,会为该节点添加明显的光晕,并仅为直接连接到它的连线添加动画,而树中的其余部分保持基础样式。指针移开后会立即清除这部分临时状态。
关键点在于,这个示例不会重建图谱,也不会替换内置的边渲染器。它使用 slot 级别的悬停处理器,再结合运行时图实例更新,来重设已经加载好的节点和连线样式。
数据是如何组织的
图数据直接在 initializeGraph 中以内联方式声明为一个 RGJsonData 对象,其中包含一个 rootId、一个扁平的 nodes 数组,以及一个扁平的 lines 数组。每个节点都有 id、显示文本 text,以及一个很小的 data.icon 负载。每条连线都有自己的 id、from、to、标签文