relation-graph

- relation-graph 是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素，并提供实用的API接口让使用者轻松构建可交互的图形应用。

- 除了典型的关系数据展示功能，relation-graph还支持作为一个画板来使用，你可以在画板上放置任何内容，只需要为想要连接的元素设置id，同时定义"元素连线（Element Lines）"即可。轻松实现一个可任意创建连线、可缩放与拖动、支持通过API轻松实现动态交互的画板。
- relation-graph is a relationship data display component that supports Vue 2, Vue 3, and React. It enables users to fully customize graphical elements using "common HTML elements, Vue components, React components" through slots, and provides practical API interfaces to facilitate the development of interactive graphical applications."

- In addition to the typical relationship data display functionality, the relation-graph also supports being used as a drawing board. You can place any content on the drawing board, simply by setting an id for the elements you want to connect, and defining "element lines." This allows for the easy creation of a drawing board that supports the creation of arbitrary connections, zooming and dragging, and dynamic interactions through the API.

$3

- https://relation-graph.com （国内用户，无需科学上网）

- https://relation-graph.github.io（For regions outside of China）

上面的网站中包含使用文档、在线示例，以及可视化的配置工具。

The website above includes documentation, online demos, and a visual configuration tool for software developers.

$3

``shell script
npm install --save relation-graph
`
`shell script


注意：relation-graph支持Vue2、Vue3、React, 引入的包名称都是"relation-graph" 但在使用时，根据你的环境，需要引入不同的名称

Note: relation-graph supports Vue2, Vue3, React, but the package name for import is always "relation-graph".

#

Vue2： import RelationGraph from 'relation-graph'

Vue3： import RelationGraph from 'relation-graph/vue3'

React： import RelationGraph from 'relation-graph/react'

`

`vue



``

$3

!简单示例效果图

$3

- The complete Vue2 sample project: / Vue3完整小示例:
- https://github.com/seeksdream/relation-graph-vue3-demo

- The complete Vue3 sample project: / React完整小示例:
- https://github.com/seeksdream/relation-graph-react-demo

- The complete React sample project: / vue2完整小示例:
- https://github.com/seeksdream/relation-graph-vue2-demo

$3

- https://relation-graph.com/#/demo （国内用户，无需科学上网）

- https://relation-graph.github.io/#/demo（For regions outside of China）

!relation-graph

!center-层级距离设置
!力学布局(force)
!节点展开/收缩的用法
!节点筛选 & 关系筛选
!节点/连线点击效果2
!展开/收缩 时动画效果
!展开/关闭所有
!布局切换事件

$3

- The complete Vue2 sample project & vue2完整小示例：
- https://github.com/seeksdream/relation-graph-vue2-demo

- The complete Vue3 sample project & vue3完整小示例：
- https://github.com/seeksdream/relation-graph-vue3-demo

- The complete React sample project & React完整小示例：
- https://github.com/seeksdream/relation-graph-react-demo

$3

- https://relation-graph.com （国内用户，无需科学上网）

- https://relation-graph.github.io（For regions outside of China）

$3

- 我的QQ：3235808353
- My WhatsApp: