Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/seeksdream/relation-graph

relation-graph is a relationship graph display component that supports Vue2, Vue3, React. Allowing you to fully customize the graphical elements using HTML/CSS and Vue or React components through slots. 支持Vue和React的关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。
https://github.com/seeksdream/relation-graph

graph react relationship-graph vue vue3

Last synced: 6 days ago
JSON representation

Host: GitHub
URL: https://github.com/seeksdream/relation-graph
Owner: seeksdream
License: mit
Created: 2020-09-04T06:39:25.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-09-14T03:43:02.000Z (3 months ago)
Last Synced: 2024-12-10T07:22:27.940Z (13 days ago)
Topics: graph, react, relationship-graph, vue, vue3
Language: TypeScript
Homepage: https://relation-graph.com
Size: 14.5 MB
Stars: 1,945
Watchers: 13
Forks: 497
Open Issues: 5
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        



# 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.

### Docs & Examples  文档 & 示例：

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

- [https://relation-graph.github.io](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.

### Getting Started  快速使用：

```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

  


    

      

    

  


// relation-graph also supports usage in the main.js file with Vue.use(RelationGraph); this way, you don't need the following line of code for import.

import RelationGraph from 'relation-graph'

export default {

  name: 'Demo',

  components: { RelationGraph },

  data() {

    return {

      graphOptions: {

        defaultJunctionPoint: 'border'

        // Here you can refer to the options in "Graph" for setting: 

        // https://www.relation-graph.com/#/docs/graph

        // You can also use this GUI tool to generate configuration content.

        // https://www.relation-graph.com/#/options-tools

      }

    }

  },

  mounted() {

    this.showGraph()

  },

  methods: {

    showGraph() {

      const jsonData = {

        rootId: 'a',

        nodes: [

          // You can also use slots directly without defining these cumbersome attributes and use CSS styles to define the appearance of your nodes.

          // Example of using slots: https://www.relation-graph.com/#/demo/node-style

          { id: 'a', text: 'A', borderColor: 'yellow' },

          { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },

          { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },

          { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }

        ],

        lines: [

          { from: 'a', to: 'b', text: 'line1', color: '#43a2f1' },

          { from: 'a', to: 'c', text: 'line2' },

          { from: 'a', to: 'e', text: 'line3' },

          { from: 'b', to: 'e', color: '#67C23A' }

        ]

      }

      // The node and line in the above data can refer to the options in "Node" and "Link & Line" for configuration.

      // Node: https://www.relation-graph.com/#/docs/node

      // Link & Line: https://www.relation-graph.com/#/docs/link

      this.$refs.graphRef.setJsonData(jsonData, (graphInstance) => {

        // Called when the relation-graph is completed

      });

      // The this.refs.graphRef.setJsonData(jsonData, callback) method is a convenient method that is equivalent to the following code:

      //  const graphInstance = this.refs.graphRef.getInstance();

      //  graphInstance.addNodes(jsonData.nodes);

      //  graphInstance.addLines(jsonData.lines);

      //  graphInstance.rootNode = graphInstance.getNodeById(jsonData.rootId);

      //  await graphInstance.doLayout(); // Layout using the layouter set in graphOptions

      //  await graphInstance.moveToCenter(); // Find the center based on node distribution and center the view

      //  await graphInstance.zoomToFit(); // Zoom to fit, so that all nodes can be displayed in the visible area

    },

    onNodeClick(nodeObject, $event) {

      console.log('onNodeClick:', nodeObject)

    },

    onLineClick(lineObject, $event) {

      console.log('onLineClick:', lineObject)

    }

  }

}

```

### Sample code effects  上面代码的效果：

![简单示例效果图](doc/images/relation-graph-simple.png)

### Example Projects  完整的示例代码：

- 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

### More Examples   更多示例：

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

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

![relation-graph](doc/relation-graph-images-m.png)

![center-层级距离设置](doc/demo-images/distance_coefficient.gif)

![力学布局(force)](doc/demo-images/layout-force.gif)

![节点展开/收缩的用法](doc/demo-images/adv-expand.gif)

![节点筛选 & 关系筛选](doc/demo-images/adv-data-filter.gif)

![节点/连线点击效果2](doc/demo-images/adv-effect2.gif)

![展开/收缩 时动画效果](doc/demo-images/expand-animation.gif)

![展开/关闭所有](doc/demo-images/open-all-close-all.gif)

![布局切换事件](doc/demo-images/before-change-layout.gif)

### The complete sample project 完整的、可运行的示例项目：

- 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

### More info  更多效果及使用方法：

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

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

### Contact me  与我联系：

- 我的QQ：3235808353

- My WhatsApp: