[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:line-label-and-endpoint-editing":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用内置控制器编辑现有连线标签和端点\n\n## 这个示例构建了什么\n\n这个示例构建了一个紧凑的编辑工作区，用于维护小型图中的现有连接。页面展示了一个全高的 relation-graph 画布、一个浮动说明窗口、绿色曲线以及点状背景，使整个界面看起来更像一个编辑器，而不是静态演示页。\n\n用户可以点击一条连线以显示端点控制器，拖动这些控制器重新连接该连线，双击连线标签修改其文本，并将标签拖到新的位置。这个示例的核心关注点是边的维护，尤其是标签文本和标签位置，而不是扩展成一个完整的节点与边创作工具或路径编辑器。\n\n## 数据是如何组织的\n\n图数据以内联方式声明为一个 `RGJsonData` 对象。它包含一个 `rootId`、一个仅含 `id` 和 `text` 的扁平 `nodes` 数组，以及一个 `lines` 数组，其中每条连接都具有稳定的 `id`、`text`、`from` 和 `to` 字段。\n\n在调用 `setJsonData()` 之前没有任何预处理。组件在 `initializeGraph()` 内部构造数据集，在挂载时直接将其加载到图实例中，然后调用 `zoomTo",true,500,1782615407694]