{"id":13901328,"url":"https://github.com/seeksdream/relation-graph","last_synced_at":"2025-05-13T17:10:09.635Z","repository":{"id":38355270,"uuid":"292770274","full_name":"seeksdream/relation-graph","owner":"seeksdream","description":"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的 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。","archived":false,"fork":false,"pushed_at":"2025-04-22T12:53:51.000Z","size":15921,"stargazers_count":2071,"open_issues_count":8,"forks_count":510,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-05T20:03:46.300Z","etag":null,"topics":["graph","react","relationship-graph","vue","vue3"],"latest_commit_sha":null,"homepage":"https://relation-graph.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seeksdream.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["seeksdream@qq.com"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2020-09-04T06:39:25.000Z","updated_at":"2025-05-02T15:48:41.000Z","dependencies_parsed_at":"2023-02-07T13:46:29.930Z","dependency_job_id":"73a440ae-91de-4081-86ea-1c8853516c23","html_url":"https://github.com/seeksdream/relation-graph","commit_stats":{"total_commits":112,"total_committers":10,"mean_commits":11.2,"dds":0.1428571428571429,"last_synced_commit":"7375e5e14a4d2b914d843f43f8bdaf91f336b478"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeksdream%2Frelation-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeksdream%2Frelation-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeksdream%2Frelation-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seeksdream%2Frelation-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seeksdream","download_url":"https://codeload.github.com/seeksdream/relation-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253990467,"owners_count":21995774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graph","react","relationship-graph","vue","vue3"],"created_at":"2024-08-06T21:01:12.324Z","updated_at":"2025-05-13T17:10:04.622Z","avatar_url":"https://github.com/seeksdream.png","language":"TypeScript","readme":"\n\n\u003cimg src=\"doc/relation-graph-yellow-small.png\" width=\"60\" /\u003e\n\n# relation-graph\n\n\n[English ](README.md) | [简体中文](README-zh.md)\n\n- **relation-graph** 是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用\"普通HTML元素、Vue组件、React组件\"来完全自定义图形元素，并提供实用的API接口让使用者轻松构建可交互的图形应用。\u003cbr /\u003e\n-  除了典型的关系数据展示功能，relation-graph还支持作为一个画板来使用，你可以在画板上放置任何内容，只需要为想要连接的元素设置id，同时定义\"元素连线（Element Lines）\"即可。轻松实现一个可任意创建连线、可缩放与拖动、支持通过API轻松实现动态交互的画板。\n### Docs \u0026 Examples  文档 \u0026 示例：\n\n- [https://relation-graph.com](https://relation-graph.com)  （国内用户，无需科学上网）\n\n上面的网站中包含使用文档、在线示例，以及可视化的配置工具。\u003cbr\u003e\n\n### Getting Started  快速使用：\n\n```shell script\nnpm install --save relation-graph\n```\n```shell script\n# 注意：relation-graph支持Vue2、Vue3、React, 引入的包名称都是\"relation-graph\" 但在使用时，根据你的环境，需要引入不同的名称\n# Note: relation-graph supports Vue2, Vue3, React, but the package name for import is always \"relation-graph\".\n# \n# Vue2： import RelationGraph from 'relation-graph'\n# Vue3： import RelationGraph from 'relation-graph/vue3'\n# React： import RelationGraph from 'relation-graph/react'\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv style=\"height:calc(100vh - 60px);\"\u003e\u003c!-- The size of the parent element determines the size of the graph. --\u003e\n      \u003cRelationGraph\n              ref=\"graphRef\"\n              :options=\"graphOptions\"\n              :on-node-click=\"onNodeClick\"\n              :on-line-click=\"onLineClick\"\n      /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// 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.\nimport RelationGraph from 'relation-graph'\nexport default {\n  name: 'Demo',\n  components: { RelationGraph },\n  data() {\n    return {\n      graphOptions: {\n        defaultJunctionPoint: 'border'\n        // Here you can refer to the options in \"Graph\" for setting: \n        // https://www.relation-graph.com/#/docs/graph\n        // You can also use this GUI tool to generate configuration content.\n        // https://www.relation-graph.com/#/options-tools\n      }\n    }\n  },\n  mounted() {\n    this.showGraph()\n  },\n  methods: {\n    showGraph() {\n      const jsonData = {\n        rootId: 'a',\n        nodes: [\n          // You can also use slots directly without defining these cumbersome attributes and use CSS styles to define the appearance of your nodes.\n          // Example of using slots: https://www.relation-graph.com/#/demo/node-style\n          { id: 'a', text: 'A', borderColor: 'yellow' },\n          { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },\n          { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },\n          { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }\n        ],\n        lines: [\n          { from: 'a', to: 'b', text: 'line1', color: '#43a2f1' },\n          { from: 'a', to: 'c', text: 'line2' },\n          { from: 'a', to: 'e', text: 'line3' },\n          { from: 'b', to: 'e', color: '#67C23A' }\n        ]\n      }\n      // The node and line in the above data can refer to the options in \"Node\" and \"Link \u0026 Line\" for configuration.\n      // Node: https://www.relation-graph.com/#/docs/node\n      // Link \u0026 Line: https://www.relation-graph.com/#/docs/link\n\n      this.$refs.graphRef.setJsonData(jsonData, (graphInstance) =\u003e {\n        // Called when the relation-graph is completed\n      });\n      // The this.refs.graphRef.setJsonData(jsonData, callback) method is a convenient method that is equivalent to the following code:\n      //  const graphInstance = this.refs.graphRef.getInstance();\n      //  graphInstance.addNodes(jsonData.nodes);\n      //  graphInstance.addLines(jsonData.lines);\n      //  graphInstance.rootNode = graphInstance.getNodeById(jsonData.rootId);\n      //  await graphInstance.doLayout(); // Layout using the layouter set in graphOptions\n      //  await graphInstance.moveToCenter(); // Find the center based on node distribution and center the view\n      //  await graphInstance.zoomToFit(); // Zoom to fit, so that all nodes can be displayed in the visible area\n    },\n    onNodeClick(nodeObject, $event) {\n      console.log('onNodeClick:', nodeObject)\n    },\n    onLineClick(lineObject, $event) {\n      console.log('onLineClick:', lineObject)\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n\n### Sample code effects  上面代码的效果：\n![简单示例效果图](doc/images/relation-graph-simple.png)\n\n### Example Projects  完整的示例代码：\n\n- Vue3完整小示例:\n- https://github.com/seeksdream/relation-graph-vue3-demo\n\n- React完整小示例:\n- https://github.com/seeksdream/relation-graph-react-demo\n\n- vue2完整小示例:\n- https://github.com/seeksdream/relation-graph-vue2-demo\n\n\n### More Examples   更多示例：\n- [https://relation-graph.com/#/demo](https://relation-graph.com/#/demo)  （国内用户，无需科学上网）\n\n\n![relation-graph](doc/relation-graph-images-m.png)\n\n![center-层级距离设置](doc/demo-images/distance_coefficient.gif)\n![力学布局(force)](doc/demo-images/layout-force.gif)\n![节点展开/收缩的用法](doc/demo-images/adv-expand.gif)\n![节点筛选 \u0026 关系筛选](doc/demo-images/adv-data-filter.gif)\n![节点/连线点击效果2](doc/demo-images/adv-effect2.gif)\n![展开/收缩 时动画效果](doc/demo-images/expand-animation.gif)\n![展开/关闭所有](doc/demo-images/open-all-close-all.gif)\n![布局切换事件](doc/demo-images/before-change-layout.gif)\n\n### 完整的、可运行的示例项目：\n\n- Vue2完整小示例：\n- [https://github.com/seeksdream/relation-graph-vue2-demo(Vite)](https://github.com/seeksdream/relation-graph-vue2-demo)\n- [https://github.com/seeksdream/relation-graph-vue2-demo(Webpack)](https://github.com/seeksdream/relation-graph-webpack)\n\n- Vue3完整小示例：\n- https://github.com/seeksdream/relation-graph-vue3-demo\n\n- React完整小示例：\n- https://github.com/seeksdream/relation-graph-react-demo\n\n\n### More info  更多效果及使用方法：\n\n- [https://relation-graph.com](https://relation-graph.com)  （国内用户，无需科学上网）\n\n### Contact me  与我联系：\n\n- 我的QQ：3235808353\n- My WhatsApp:\n\n  \u003cimg src=\"doc/images/Whatsapp.png\" width=\"200\" /\u003e\n\n","funding_links":["https://github.com/sponsors/seeksdream@qq.com"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseeksdream%2Frelation-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseeksdream%2Frelation-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseeksdream%2Frelation-graph/lists"}