快速开始
本页对应英文版 Getting Started，用于帮助你快速理解 relation-graph 的安装方式、平台差异、基本初始化模式，以及图实例与数据提供者的基本概念。
安装
relation-graph 按平台拆分为多个 npm 包。不同项目应按使用框架选择对应包：
- Vue 2 使用
@relation-graph/vue2 - Vue 3 使用
@relation-graph/vue - React 使用
@relation-graph/react - Svelte 使用
@relation-graph/svelte - HTML / Web Components 使用
@relation-graph/web-components
包结构概览
- 所有平台包共享同一套核心图引擎。
- 平台层负责响应式数据注入、组件包装和框架生命周期处理。
- 因此，不同平台的核心配置、数据结构和主要 API 都保持高度一致。
各平台基本使用方式
Vue 2
- 常见模式是
RGProvider + 图组件 + 插槽内容。 - 数据通常通过
Vue.set或 provider 注入的方式保持响应式。
Vue 3
- 推荐基于 Composition API 和
ref/reactive使用。 - 通过 hooks 或实例引用获得
graphInstance。
React
- 主要通过组件属性与
forwardRef暴露 API。 - 图实例通常在组件内部创建，再通过 ref 提供给外部。
Svelte
- 通过 store 与 context 分发图状态。
- hooks 集合用于获取实例、状态和渲染辅助数据。
Web Components
- 适合原生 HTML 或非主流前端框架场景。
- 组件以自定义元素形式暴露，可直接在 DOM 中使用。
组件接入流程
一个典型的接入流程通常包括：
- 安装平台包
- 引入顶层组件或 provider
- 准备
options和图数据 - 渲染组件并注册插槽内容
- 在需要时获取
graphInstance调用 API
核心概念
RelationGraphCore 实例
- 图实例是系统的核心入口。
- 数据增删改查、布局控制、缩放平移、编辑操作与事件处理，都围绕它展开。
配置对象
options用于描述布局、视觉风格、交互开关、编辑能力和性能模式。- 配置既可以在初始化时传入，也可以在运行时通过 API 更新。
初始数据结构
- 节点与连线通常以 JSON 结构传入。
- 进入系统后会被转换为运行时对象，以支持布局、渲染和交互。
关于实例获取的重要提醒
- 不同平台中，图实例并不是在组件渲染前就可用。
- 应在平台允许的生命周期节点中获取实例，避免在尚未初始化时直接调用 API。
Data Provider 模式
- 底层数据存储由
RGDataProvider系列对象负责。 - 它统一处理节点、连线、映射表、提交记录与响应式更新。
- 这是 relation-graph 在多平台下保持一致行为的关键设计之一。
RelationLinker 组件
RelationLinker用于处理连线、目标点和图关系的组织逻辑。- 在复杂图编辑、连线定制与自定义关系场景下尤其重要。
下一步
建议继续阅读：