[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:highlight-related-lines-on-node-hover":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 节点悬停时高亮相关连线\n\n## 此示例构建了什么\n\n这个示例构建了一个全高树形查看器，当指针移到某个节点上时，会强调该节点的直接关系。屏幕上展示的是一个自上而下的小型层级结构，包含以字母标记的条目、圆角紫色节点标签，以及正交连接线，画布上方还叠加了一个悬浮辅助窗口。\n\n最主要的可见效果是临时关系高亮。悬停某个节点时，会为该节点添加明显的光晕，并仅为直接连接到它的连线添加动画，而树中的其余部分保持基础样式。指针移开后会立即清除这部分临时状态。\n\n关键点在于，这个示例不会重建图谱，也不会替换内置的边渲染器。它使用 slot 级别的悬停处理器，再结合运行时图实例更新，来重设已经加载好的节点和连线样式。\n\n## 数据是如何组织的\n\n图数据直接在 `initializeGraph` 中以内联方式声明为一个 `RGJsonData` 对象，其中包含一个 `rootId`、一个扁平的 `nodes` 数组，以及一个扁平的 `lines` 数组。每个节点都有 `id`、显示文本 `text`，以及一个很小的 `data.icon` 负载。每条连线都有自己的 `id`、`from`、`to`、标签文",true,500,1782615425897]