在 Svelte 中使用
本页是 relation-graph 的 Svelte 快速接入指南，内容基于 ai-prompts/relation-graph-guide.md。
1. 安装
npm install --save @relation-graph/svelte
旧包名 relation-graph-svelte 在旧项目中也可能出现。
2. 核心组件
RGProvider：提供图谱上下文。RelationGraph：渲染图谱。RGHooks：在 Svelte 组件中获取实例和状态。
3. 最小可用 Svelte 结构
MyGraphComponent.svelte
<script lang="ts">
import { RGProvider } from '@relation-graph/svelte';
import MyGraph from './MyGraph.svelte';
</script>
<RGProvider>
<MyGraph />
</RGProvider>
MyGraph.svelte
<script lang="ts">
import { onMount } from 'svelte';
import { RelationGraph, RGHooks } from '@relation-graph/svelte';
import type { JsonNode, JsonLine, RGOptions } from '@relation-graph/svelte';
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: 'Svelte App' },
{ id: '3', text: 'Graph Engine' }
];
const lines: JsonLine[] = [
{ from: '1', to: '2', text: 'uses' },
{ from: '1', to: '3', text: 'drives' }
];
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);
};
onMount(() => {
initializeGraph();
});
const onNodeClick = (event) => {
const [nodeObject, nativeEvent] = event.detail;
console.log('node click:', nodeObject && nodeObject.id, nativeEvent);
};
const onLineClick = (event) => {
const [lineObject, linkObject, nativeEvent] = event.detail;
console.log('line click:', lineObject && lineObject.from, lineObject && lineObject.to, linkObject, nativeEvent);
};
</script>
<div style="width: 100vw; height: 100vh; background-color: #ffffff;">
<RelationGraph
options={graphOptions}
on:onNodeClick={onNodeClick}
on:onLineClick={onLineClick}
/>
</div>
4. 数据接入方式
- 增量 API：
addNodes、addLines、update/remove。 - 一次性 API：
setJsonData。 - 初始化属性：
initialData。
4.1 setJsonData 示例
graphInstance.setJsonData({
rootId: '1',
nodes,
lines
});
5. 在 Svelte 中获取图谱状态
import { RGHooks } from '@relation-graph/svelte';
const graphInstance = RGHooks.useGraphInstance();
const { creatingLineStore } = RGHooks.useHookStore();
const { creatingNodeStore } = RGHooks.useHookStore();
const { editingNodesStore } = RGHooks.useHookStore();
const { editingLineStore } = RGHooks.useHookStore();
const { connectingNodeStore } = RGHooks.useHookStore();
const { viewInformationStore } = RGHooks.useHookStore();
const { selectionViewStore } = RGHooks.useHookStore();
const { checkedItemStore } = RGHooks.useHookStore();
$: creatingLine = $creatingLineStore;
$: creatingNode = $creatingNodeStore;
$: editingNodes = $editingNodesStore;
$: editingLine = $editingLineStore;
$: connectingNode = $connectingNodeStore;
$: viewInformation = $viewInformationStore;
$: selectionView = $selectionViewStore;
$: checkedItem = $checkedItemStore;
6. 实践建议
<RelationGraph>的大小取决于父容器。- 配置项运行时更新建议通过实例 API。
- 动态编辑场景优先增量更新，减少整图重置。