JavaScript is required
relation-graph 关系数据可视化与编辑解决方案
登录 English GitHub

在 Vue2 中使用

本页是 relation-graph 的 Vue2 快速接入指南，内容基于 ai-prompts/relation-graph-guide.md。

1. 安装

npm install --save @relation-graph/vue2

旧包名 relation-graph-vue2 也很常见。

2. 核心组件与模式

  • RGProvider：提供图谱上下文。
  • RelationGraph：渲染图谱。
  • graphStoreMixin：Vue2 下获取图谱实例与响应式状态的主要方式。

3. 最小可用 Vue2 结构

MyGraphComponent.vue

<template>
  <RGProvider>
    <MyGraph />
  </RGProvider>
</template>

<script>
import { RGProvider } from '@relation-graph/vue2';
import MyGraph from './MyGraph.vue';

export default {
  name: 'MyGraphComponent',
  components: { RGProvider, MyGraph }
};
</script>

MyGraph.vue

<template>
  <div style="width: 100vw; height: 100vh; background-color: #ffffff;">
    <RelationGraph :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
  </div>
</template>

<script>
import { RelationGraph, graphStoreMixin } from '@relation-graph/vue2';

export default {
  name: 'MyGraph',
  components: { RelationGraph },
  mixins: [graphStoreMixin],
  data() {
    return {
      graphOptions: {
        showToolBar: false,
        wheelEventAction: 'scroll',
        dragEventAction: 'move',
        layout: {
          layoutName: 'tree',
          from: 'left',
          treeNodeGapH: 150,
          treeNodeGapV: 10
        }
      }
    };
  },
  mounted() {
    this.initializeGraph();
  },
  methods: {
    initializeGraph() {
      const graphInstance = this.graphInstance;
      const nodes = [
        { id: '1', text: 'Root' },
        { id: '2', text: 'Vue2 App' },
        { id: '3', text: 'Graph Engine' }
      ];
      const lines = [
        { 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);
    },
    onNodeClick(nodeObject, event) {
      console.log('node click:', nodeObject && nodeObject.id, event);
    },
    onLineClick(lineObject, linkObject, event) {
      console.log('line click:', lineObject && lineObject.from, lineObject && lineObject.to, linkObject, event);
    }
  }
};
</script>

4. 数据接入方式

  1. 增量方式：addNodes、addLines 以及 update/remove 系列 API。
  2. 一次性方式：setJsonData。
  3. 初始化方式：initialData（初始化/SSR 风格场景）。

4.1 使用 setJsonData

this.graphInstance.setJsonData({
  rootId: '1',
  nodes,
  lines
});

4.2 使用 initialData

<RelationGraph :options="graphOptions" :initialData="{ rootId: '1', nodes, lines }" />

5. 在 Vue2 中获取图谱状态

通过 graphStoreMixin 可直接获取：

  • this.graphInstance
  • this.creatingLine
  • this.creatingNode
  • this.editingNodes
  • this.editingLine
  • this.connectingNode
  • this.viewInformation
  • this.selectionView
  • this.checkedItem

这些对象可用于驱动编辑器工具栏、属性面板和交互状态显示。

6. 实践建议

  • 图谱显示尺寸完全由父容器决定。
  • 配置项动态更新建议调用实例 API（如 updateOptions）。
  • 如果 RGProvider 不卸载但页面反复进出，加载新图前先 clearGraph()。

7. 下一步阅读