在 Vue3 中使用
本页是 relation-graph 的 Vue3 快速接入指南，内容基于 ai-prompts/relation-graph-guide.md。
1. 安装
npm install --save @relation-graph/vue
旧包名（例如 relation-graph-vue3）在很多项目中仍可见。
2. 核心组件
RGProvider：提供图谱上下文（实例 + 响应式状态）。RelationGraph：负责渲染图谱。RGHooks：在RGProvider内部组件中获取图谱实例和状态。
3. 最小可用 Vue3 结构
MyGraphComponent.vue
<template>
<RGProvider>
<MyGraph />
</RGProvider>
</template>
<script setup lang="ts">
import { RGProvider } from '@relation-graph/vue';
import MyGraph from './MyGraph.vue';
</script>
MyGraph.vue
<template>
<div style="width: 100vw; height: 100vh; background-color: #ffffff;">
<RelationGraph :options="graphOptions" />
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { RelationGraph, RGHooks } from '@relation-graph/vue';
import type { JsonNode, JsonLine, RGOptions } from '@relation-graph/vue';
const graphInstance = RGHooks.useGraphInstance();
const graphOptions: RGOptions = {
showToolBar: false,
wheelEventAction: 'scroll',
dragEventAction: 'move',
layout: {
layoutName: 'tree',
from: 'left',
treeNodeGapH: 150,
treeNodeGapV: 10
}
};
const initializeGraph = () => {
const nodes: JsonNode[] = [
{ id: '1', text: 'Root' },
{ id: '2', text: 'Vue3 App' },
{ id: '3', text: 'Graph Engine' },
{ id: '4', text: 'UI Layer' }
];
const lines: JsonLine[] = [
{ from: '1', to: '2', text: 'uses' },
{ from: '1', to: '3', text: 'drives' },
{ from: '2', to: '4', text: 'renders' }
];
graphInstance.clearGraph();
graphInstance.addNodes(nodes);
graphInstance.addLines(lines);
setTimeout(() => {
const layouter = graphInstance.createLayout({
layoutName: 'tree',
from: 'left',
treeNodeGapH: 150,
treeNodeGapV: 10
});
const allNodes = graphInstance.getNodes();
const rootNode = graphInstance.getNodeById('1');
if (rootNode) {
layouter.placeNodes(allNodes, rootNode);
}
graphInstance.moveToCenter();
graphInstance.zoomToFit();
}, 300);
};
onMounted(() => {
initializeGraph();
});
</script>
4. 图谱数据接入方式
addNodes+addLines+ 自定义布局（适合动态更新）。setJsonData一次性设置完整数据。initialData属性初始化（适合初始化/SSR 场景）。
4.1 使用 setJsonData
graphInstance.setJsonData({
rootId: '1',
nodes,
lines
});
4.2 使用 initialData
<RelationGraph
:options="graphOptions"
:initialData="{ rootId: '1', nodes, lines }"
/>
5. 事件注册
<RelationGraph
:options="graphOptions"
@onNodeClick="onNodeClick"
@onLineClick="onLineClick"
/>
import type { RGNode, RGLine, RGLink, RGUserEvent } from '@relation-graph/vue';
const onNodeClick = (nodeObject: RGNode, event: RGUserEvent) => {
console.log('node click:', nodeObject.id, event);
};
const onLineClick = (lineObject: RGLine, linkObject: RGLink, event: RGUserEvent) => {
console.log('line click:', lineObject.from, lineObject.to, linkObject, event);
};
6. 通过 RGHooks 获取状态
const graphInstance = RGHooks.useGraphInstance();
const creatingLine = RGHooks.useCreatingLine();
const creatingNode = RGHooks.useCreatingNode();
const editingNodes = RGHooks.useEditingNodes();
const editingLine = RGHooks.useEditingLine();
const connectingNode = RGHooks.useConnectingNode();
const viewInformation = RGHooks.useViewInformation();
const selectionView = RGHooks.useSelectionView();
const checkedItem = RGHooks.useCheckedItem();
7. 实践建议
<RelationGraph>的尺寸由父容器决定。options更适合初始化；运行时变更建议调用graphInstance.updateOptions(...)。- 如果
RGProvider仍然存在但图页面被重建，加载新数据前先clearGraph()。 - 编辑器类场景建议优先用增量 API，而不是频繁
setJsonData。