[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:gradient-line-graph-editor":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 构建一个由调色板驱动的渐变线图编辑器\n\n## 这个示例构建的内容\n\n这个示例构建的是一个紧凑的图编辑器，而不是只读的关系视图。初始画布会显示一个小型、类似工作流的路由图，其中包含圆角图标节点、与节点主体分离的文本标签，以及颜色从源节点过渡到目标节点的曲线连线。\n\n用户可以选择节点和连线、框选多个节点、从顶部中央的调色板拖拽图标模板来创建新节点、通过节点旁的工具栏创建新的出边、删除已选节点、删除已选连线、调整节点尺寸、在浮动设置面板中修改画布滚轮与拖拽行为，并将当前图导出为图片。最重要的一点是，这个示例在保留 relation-graph 编辑模型的同时，替换了节点和连线两者的可视化表现层。\n\n## 数据是如何组织的\n\n初始图数据在 `MyGraph.tsx` 中以内联的 `RGJsonData` 形式声明。每个节点存储 `id`、`text`、`color`，以及一个 `data.myIcon` 字段，节点插槽会使用这个字段来选择 Lucide 图标。每条连线只存储 `id`、`from`、`to` 和 `text`，因此图一开始采用的是一种简单、偏业务友好的数据形状。\n\n在调用 ",true,500,1782615372951]