[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:highlight-line-and-endpoints-on-click":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 高亮被点击的连线及其端点节点\n\n## 这个示例构建了什么\n\n这个示例构建了一个紧凑的自上而下树形查看器，其中可选中的对象是关系连线本身。界面展示为一个间距较宽的正交层级结构，带有小型紫色节点标签、可见的连线标签，以及位于全高画布上方的浮动辅助窗口。\n\n当用户点击某条连线时，这个示例会加宽该连线，将其标签块切换为深紫色样式，并为这条连线的两个端点节点添加环形高亮。点击空白画布会清除这种临时强调状态。最关键的一点是，高亮从边开始，再传播到恰好两个节点，而不是从节点悬停开始，也不会扩展到整个分支。\n\n## 数据是如何组织的\n\n图以内联方式组装为一个 `RGJsonData` 对象，其中包含 `rootId`、扁平的 `nodes` 数组和扁平的 `lines` 数组。每个节点都有稳定的 `id` 和 `text`，每条连线也都有自己的 `id`、`from`、`to` 以及标签文本。这个示例在调用 `setJsonData` 之前不会做任何结构预处理；它直接在 `initializeGraph()` 中准备数据集，并按原样加载。\n\n这种结构可以很好地映射到真实的关系型数据集，例如服务依赖",true,500,1782615426233]