relation-graph关系图谱

一、relation-graph简介

一个Vue的关系图谱组件，使用非常方便

用途

可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。

二、使用步骤

1.引入库

代码如下（示例）：

npm install --save relation-graph

2.页面中使用

代码如下（示例）：

<template>
   <div>
     <div style="height:calc(100vh - 50px);">
        <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
     </div>
   </div>
 </template>
 
 <script>
 import RelationGraph from 'relation-graph'
 export default {
   name: 'Demo',
   components: { RelationGraph },
   data() {
     return {
       graphOptions: {
         allowSwitchLineShape: true,
         allowSwitchJunctionPoint: true,
         defaultJunctionPoint: 'border'
         // 这里可以参考"Graph 图谱"中的参数进行设置:http://relation-graph.com/#/docs/graph
       }
     }
   },
   mounted() {
     this.showSeeksGraph()
   },
   methods: {
     showSeeksGraph() {
       var __graph_json_data = {
         rootId: 'a',
         nodes: [
            // node配置选项：http://relation-graph.com/#/docs/node
            // node支持通过插槽slot完全自定义，示例：http://relation-graph.com/#/demo/adv-slot
           { 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 }
         ],
         links: [
            // link配置选项：http://relation-graph.com/#/docs/link
           { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
           { from: 'a', to: 'c', text: '关系2' },
           { from: 'a', to: 'e', text: '关系3' },
           { from: 'b', to: 'e', color: '#67C23A' }
         ]
       }
       this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
         // Called when the relation-graph is completed 
       })
     },
     onNodeClick(nodeObject, $event) {
       console.log('onNodeClick:', nodeObject)
     },
     onLineClick(lineObject, $event) {
       console.log('onLineClick:', lineObject)
     }
   }
 }
 </script>

三、参数配置

1.Graph 图谱

配置图谱的一些默认样式，工具栏等

代码如下（示例）：

···
       // 这里可以参考"Graph 图谱"中的参数进行设置:http://relation-graph.com/#/docs/graph
       graphOptions: {
         allowSwitchLineShape: true,  // 是否在工具栏中显示切换线条形状的按钮
         allowSwitchJunctionPoint: true, // 是否在工具栏中显示切换连接点位置的按钮
         defaultJunctionPoint: 'border' // 默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
       
       }
   ....

2.Node 节点

···
  nodes: [
            // node配置选项：http://relation-graph.com/#/docs/node
            // node支持通过插槽slot完全自定义，示例：http://relation-graph.com/#/demo/adv-slot
           { 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 }
         ],
 ···

3.Link 关系 & Line 线条

links是指节点之间的关系（link）,图谱会根据这些关系来生成线条(Line)

links: [
            // link配置选项：http://relation-graph.com/#/docs/link
           { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
           { from: 'a', to: 'c', text: '关系2' },
           { from: 'a', to: 'e', text: '关系3' },
           { from: 'b', to: 'e', color: '#67C23A' }
         ]

关系图自己一个个添加不方便，下面的方法可以把带有父id的数据快速转换成links

	dataToGraphTree:function (data){
		let GraphTree = {
			rootId: 'a',
			nodes:[],
			links:[]
		}
	    let parents = data.filter(value => value.parentId == '0')
		GraphTree.rootId = parents[0].id
		data.forEach((item, index) => {
			GraphTree.nodes.push({ id: item.id, text:  item.simpleName,})
		})
		
	    let children = data.filter(value => value.parentId !== '0')
	    let translator = (parents, children) => {
	        parents.forEach((parent) => {
	            children.forEach((current, index) => {
	                if (current.parentId === parent.id) {
	                    let temp = JSON.parse(JSON.stringify(children))
	                    temp.splice(index, 1)
	                    translator([current], temp)
						GraphTree.links.push({ from: parent.id, to:  current.id})
	                }
	            })
	        })
	    }
	    translator(parents, children)
	    return GraphTree // 需要的links
	}

4.Layout 布局

···
   // 这里可以直接在线快速配置，生成配置参数: http://relation-graph.com/#/options-tools
   
       // 这里可以参考"Graph 图谱"中的参数进行设置:http://relation-graph.com/#/docs/graph
       graphOptions: {
         allowSwitchLineShape: true,  // 是否在工具栏中显示切换线条形状的按钮
         allowSwitchJunctionPoint: true, // 是否在工具栏中显示切换连接点位置的按钮
         defaultJunctionPoint: 'border' // 默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
         
      
         "layouts": [
			    {
			      "label": "中心",
			      "layoutName": "center",
			      "layoutClassName": "seeks-layout-center",
			      "distance_coefficient": 1
			    }
			  ],
       }

···

总结