核心概念解析
在深入 API 和高级能力之前，建议先理解 relation-graph 的核心概念模型。
1. 节点（JsonNode / RGNode）
节点用于表示图中的实体对象。
常见字段：
id：唯一标识（必填）text：展示文本x、y：坐标位置（可选，是否生效取决于布局）data：业务自定义数据className、color、width、height等样式相关字段
2. 连线（JsonLine / RGLine）
连线用于表示节点之间的方向关系。
常见字段：
from：起点节点 idto：终点节点 idtext：连线文本data：业务自定义数据color、lineWidth、dashType、className等样式相关字段
3. 关联对象（RGLink）
Link 是基于连线在运行时派生出的对象。
它会关联：
- 连线本身
fromNode与toNode节点对象- 用于渲染与交互的运行时附加信息
当你需要在事件中拿到“线 + 两端节点 + 状态信息”时，通常会使用 Link。
4. 图谱实例（RelationGraphInstance）
图谱实例是 relation-graph 在运行时的控制器。
你可以通过它：
- 加载与更新图数据
- 执行布局
- 控制视口（居中、缩放、移动）
- 查询节点/关联并执行图分析操作
多数高级功能都基于实例 API 实现。
5. 布局（Layout）
布局决定节点在画布上的排列方式。
常见类型：
- 树布局
- 中心布局
- 力导向布局
- 第三方布局器集成（满足特殊场景）
布局会直接影响图的可读性、交互体验和性能。
6. 画布与视口（Canvas / Viewport）
relation-graph 在画布容器中渲染图形内容。
关键理解：
- 拖动画布本质是修改画布偏移
- 缩放本质是修改画布缩放比例
- 视口层内容可以不跟随画布缩放
理解这一点有助于你实现自定义背景层与视图层。
7. 插槽、事件与 Hooks
这是 relation-graph 的三类扩展能力：
- 插槽（Slots）：自定义节点、连线、画布、视图渲染。
- 事件（Events）：响应点击、拖拽、右键等交互。
- Hooks：以框架友好的方式访问图状态与运行时数据。
最小数据示例
{
"rootId": "a",
"nodes": [
{ "id": "a", "text": "A" },
{ "id": "b", "text": "B" }
],
"lines": [
{ "from": "a", "to": "b", "text": "A -> B" }
]
}