图谱数据流转与修改（Data Flow & CRUD）
本页总结 relation-graph 中数据加载、查询、修改的完整路径。
1. 三种主要数据接入方式
方式 A：增量 API（编辑器场景推荐）
addNodes、addLines、addFakeLines- 各类 update/remove API
- 自主控制布局与视图行为
适合动态、频繁更新。
方式 B：setJsonData 一次性加载
- 一次设置整图数据
- 内部包含 clear/add/layout/center/zoom 流程
- 适合首屏完整加载
方式 C：initialData 属性初始化
- 在组件初始化阶段注入数据
- 常用于初始化/SSR 风格场景
- 不适合作为响应式数据更新通道
2. 查询 API
// 全量数据
graphInstance.getNodes();
graphInstance.getLines();
graphInstance.getFakeLines();
graphInstance.getLinks();
// 按 id 查询
graphInstance.getNodeById('n1');
graphInstance.getLineById('l1');
graphInstance.getFakeLineById('f1');
graphInstance.getLinkByLineId('l1');
// 关系查询
graphInstance.getRelatedLinesByNode(node);
graphInstance.getLinesBetweenNodes(node);
graphInstance.getNodeRelatedNodes(node);
graphInstance.getNetworkNodesByNode(node);
graphInstance.getDescendantNodes(node);
3. 修改 API
// Add
graphInstance.addNode(node);
graphInstance.addNodes(nodes);
graphInstance.addLine(line);
graphInstance.addLines(lines);
graphInstance.addFakeLines(fakeLines);
// Update
graphInstance.updateNode('n1', { text: 'Updated' });
graphInstance.updateLine('l1', { color: '#60a5fa' });
// Remove
graphInstance.removeNodeById('n2');
graphInstance.removeLineById('l2');
graphInstance.removeFakeLineById('f1');
// Reset
graphInstance.clearGraph();
4. 动态应用推荐流程
- 用增量 API 合并或追加数据。
- 用
updateNode/updateLine做局部更新。 - 仅在必要时重排布局。
- 在用户期望重新聚焦时调用
moveToCenter/zoomToFit。
5. 何时使用 setJsonData
适用：
- 首次完整数据渲染
- 希望自动布局并自动居中缩放
不建议在高频交互编辑场景反复调用，否则会造成明显视图抖动。
6. 常见坑位
- 直接修改
options响应式对象并不会自动生效，运行时更新请走实例 API。 - 若
RGProvider常驻而图页面反复挂载，可能遗留旧数据；加载前先clearGraph()。 - 手动坐标模式与自动布局模式不要在同一更新阶段混用。