关系图谱relation-graph 使用心得
站长
· 阅读数 90
一、relation-graph简介
一个Vue的关系图谱组件，使用非常方便
relation-graph官网（上面有文档介绍和案例展示）
二、使用步骤
引入relation-graph
npm install --save relation-graph
使用组件
<RelationGraph
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
:on-node-expand="onNodeExpand"
/>
</div>
三、参数配置
1.Graph 图谱
配置图谱的一些默认样式，工具栏等
graphOptions: {
allowSwitchLineShape: true,
isMoveByParentNode:true,
disableLineClickEffect:true,
'layouts': [
// {
// 'label': '布局1',
// 'layoutName': 'center',
// 'layoutClassName': 'seeks-layout-center',
// useLayoutStyleOptions: true,
// 'defaultNodeWidth': '50',
// 'defaultNodeHeight': '50',
// defaultNodeBorderWidth: 0,
// defaultNodeColor: 'rgba(238, 178, 94, 1)',
// defaultLineShape: 1
// },
// {
// 'label': '布局2',
// 'layoutName': 'tree',
// 'layoutClassName': 'seeks-layout-center',
// useLayoutStyleOptions: true,
// 'from': 'top',
// 'defaultNodeWidth': '30',
// 'defaultNodeHeight': '100',
// 'defaultJunctionPoint': 'tb',
// 'defaultNodeShape': 1,
// 'defaultLineShape': 4,
// 'defaultNodeBorderWidth': 0,
// 'defaultLineColor': 'rgba(0, 186, 189, 1)',
// 'defaultNodeColor': 'rgba(0, 206, 209, 1)',
// 'min_per_width': 40,
// 'max_per_width': 70,
// 'min_per_height': 200
// },
{
'label': '布局3',
'layoutName': 'tree',
'layoutClassName': 'seeks-layout-center',
useLayoutStyleOptions: true,
hideNodeContentByZoom:true,
'from': 'left',
'defaultNodeWidth': '100',
'defaultNodeHeight': '30',
'defaultJunctionPoint': 'lr',
'defaultNodeShape': 1,
'defaultLineShape': 6,
'defaultNodeBorderWidth': 0,
'defaultLineColor': '#c0c0c0',
'defaultNodeColor': '#ffa00b',
'min_per_width': 200,
'max_per_width': 400,
'min_per_height': 40,
'max_per_height': 70,
'defaultExpandHolderPosition':'right',
'defaultLineWidth':3
}
],
defaultJunctionPoint: 'border'
// 这里可以参考"Graph 图谱"中的参数进行设置
}
参数具体参考文档，看你需要什么样式或者开始什么功能，按照文档上来配置，layouts里可以配置多种布局，具体看是否需要布局切换
2.Node 节点
nodes': [
{ 'id': 'a', 'text': 'a' },
{ 'id': 'b', 'text': 'b-固定数据展开/关闭' },
{ 'id': 'b1', 'text': 'b1' },
{ 'id': 'b1-1', 'text': 'b1-1' },
{ 'id': 'b1-2', 'text': 'b1-2' },
{ 'id': 'b1-3', 'text': 'b1-3' },
{ 'id': 'b1-4', 'text': 'b1-4' },
{ 'id': 'b1-5', 'text': 'b1-5' },
{ 'id': 'b1-6', 'text': 'b1-6' },
{ 'id': 'b2', 'text': 'b2' },
{ 'id': 'b2-1', 'text': 'b2-1' },
{ 'id': 'b2-2', 'text': 'b2-2' },
{ 'id': 'c', 'text': 'c-动态数据展开/关闭' },
{ 'id': 'c1', 'text': 'c1-动态获取子节点', expandHolderPosition: 'right', expanded: false, data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false }},
{ 'id': 'c2', 'text': 'c2-动态获取子节点', expandHolderPosition: 'right', expanded: false, data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false }},
{ 'id': 'c3', 'text': 'c3-动态获取子节点', expandHolderPosition: 'right', expanded: false, data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false }}]
node 节点参数也按照文档上来配置，我这里是需要用到动态获取子节点的，动态获取子节点代码
onNodeExpand(node,e){
console.log('onNodeExpand:', node);
// 根据具体的业务需要决定是否需要从后台加载数据
if (!node.data.isNeedLoadDataFromRemoteServer) {
console.log('这个节点的子节点已经加载过了');
// this.$refs.seeksRelationGraph.refresh();
return;
}
// 判断是否已经动态加载数据了
if (node.data.childrenLoaded) {
console.log('这个节点的子节点已经加载过了');
// this.$refs.seeksRelationGraph.refresh();
return;
}
this.g_loading = true;
node.data.childrenLoaded = true;
this.loadChildNodesFromRemoteServer(node, new_data => {
this.g_loading = false;
this.$refs.seeksRelationGraph.getInstance().appendJsonData(new_data, (graphInstance) => {
// 这些写上当图谱初始化完成后需要执行的代码
});
});
}
3.Link 关系
links是指节点之间的关系（link）,图谱会根据这些关系来生成线条(Line)
'lines': [
{ 'from': 'a', 'to': 'b' },
{ 'from': 'b', 'to': 'b1' },
{ 'from': 'b1', 'to': 'b1-1' },
{ 'from': 'b1', 'to': 'b1-2' },
{ 'from': 'b1', 'to': 'b1-3' },
{ 'from': 'b1', 'to': 'b1-4' },
{ 'from': 'b1', 'to': 'b1-5' },
{ 'from': 'b1', 'to': 'b1-6' },
{ 'from': 'b', 'to': 'b2' },
{ 'from': 'b2', 'to': 'b2-1' },
{ 'from': 'b2', 'to': 'b2-2' },
{ 'from': 'a', 'to': 'c' },
{ 'from': 'c', 'to': 'c1' },
{ 'from': 'c', 'to': 'c2' },
{ 'from': 'c', 'to': 'c3' }]
四、特殊处理
因为我这里需要用到点击节点展示该节点的祖宗和子孙关系，还有展示点击某个关系展示该关系的祖宗和子孙节点，需要实现on-node-click和on-line-click事件
//节点点击函数
onNodeClick(nodeObject, $event) {
console.log('onNodeClick:', nodeObject);
const allLinks = this.$refs.seeksRelationGraph.getLinks();
allLinks.forEach(link => { // 还原所有样式
link.relations.forEach(line => {
line.color = "#c0c0c0";
line.lineWidth = 3;
});
});
let fromNodeList = []
let toNodeList = []
this.getFromNode(allLinks,nodeObject,fromNodeList)
this.getToNode(allLinks,nodeObject,toNodeList)
// fromNodeList.forEach(item=>{
// console.log(item.fromNode.id + "->"+item.toNode.id)
// })
// toNodeList.forEach(item=>{
// console.log(item.fromNode.id + "->"+item.toNode.id)
// })
toNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
console.log(link.fromNode)
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
fromNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
console.log(link.fromNode)
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
// 让与{nodeObject}相关的所有连线高亮
// allLinks.filter(link => (link.fromNode === nodeObject || link.toNode === nodeObject)).forEach(link => {
// console.log(link.fromNode)
// link.relations.forEach(line => {
// console.log('line:', line);
// line.data.orignColor = line.color;
// line.data.orignFontColor = line.fontColor || line.color;
// line.data.orignLineWidth = line.lineWidth || 1;
// line.lineWidth = 3;
// });
// });
// // 有时候更改一些属性后，并不能马上同步到视图，这需要以下方法让视图强制根据数据同步到最新
this.$refs.seeksRelationGraph.getInstance().dataUpdated();
},
//获取祖宗节点（递归）
getFromNode(allLinks,node,fromNodeList){
let linkList = allLinks.filter(link => (link.toNode === node))
if(linkList.length > 0){
linkList.forEach(link =>{
fromNodeList.push({fromNode:link.fromNode,toNode:node})
this.getFromNode(allLinks,link.fromNode,fromNodeList)
})
}
},
//获取子孙节点（递归）
getToNode(allLinks,node,toNodeList){
let linkList = allLinks.filter(link => (link.fromNode === node))
if(linkList.length > 0){
linkList.forEach(link =>{
toNodeList.push({fromNode:node,toNode:link.toNode})
this.getToNode(allLinks,link.toNode,toNodeList)
})
}
},
//关系惦记函数
onLineClick(lineObject, linkObject, $event) {
console.log('onLineClick:', linkObject);
const allLinks = this.$refs.seeksRelationGraph.getLinks();
allLinks.forEach(link => { // 还原所有样式
link.relations.forEach(line => {
line.color = "#c0c0c0";
line.lineWidth = 3;
});
});
let fromNodeList = []
let toNodeList = []
this.getFromNode(allLinks,linkObject.fromNode,fromNodeList)
this.getToNode(allLinks,linkObject.toNode,toNodeList)
toNodeList.push({fromNode:linkObject.fromNode,toNode:linkObject.toNode})
fromNodeList.forEach(item=>{
console.log(item.fromNode.id + "->"+item.toNode.id)
})
toNodeList.forEach(item=>{
console.log(item.fromNode.id + "->"+item.toNode.id)
})
toNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
fromNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
console.log(link.fromNode)
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
this.$refs.seeksRelationGraph.getInstance().dataUpdated();
}
五、完整代码
<template>
<div v-loading="g_loading">
<div style="height:calc(100vh - 50px);">
<RelationGraph
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
:on-node-expand="onNodeExpand"
/>
</div>
<el-button type="success" class="c-show-code-button">
<el-link
href="https://github.com/seeksdream/relation-graph/blob/master/examples/views/seeks-graph-docs/demo/Demo4AdvMultiLayout.vue"
target="_blank" style="color: #ffffff;">查看代码
</el-link>
</el-button>
<el-drawer
title="node option:"
direction="rtl"
size="50%"
custom-class="c-drawer-window"
:modal="false"
:visible.sync="isShowCodePanel"
:with-header="false"
>
<iframe src="/relation-graph-codes/Demo4Logo.html" width="100%" height="100%" frameborder="0" scrolling="auto"
style=""/>
</el-drawer>
</div>
</template>
<script>
// 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph
// import RelationGraph from 'relation-graph';
import test from './test.json'
export default {
name: 'Demo',
components: {},
data() {
return {
g_loading:false,
isShowCodePanel: false,
graphOptions: {
allowSwitchLineShape: true,
isMoveByParentNode:true,
disableLineClickEffect:true,
'layouts': [
// {
// 'label': '布局1',
// 'layoutName': 'center',
// 'layoutClassName': 'seeks-layout-center',
// useLayoutStyleOptions: true,
// 'defaultNodeWidth': '50',
// 'defaultNodeHeight': '50',
// defaultNodeBorderWidth: 0,
// defaultNodeColor: 'rgba(238, 178, 94, 1)',
// defaultLineShape: 1
// },
// {
// 'label': '布局2',
// 'layoutName': 'tree',
// 'layoutClassName': 'seeks-layout-center',
// useLayoutStyleOptions: true,
// 'from': 'top',
// 'defaultNodeWidth': '30',
// 'defaultNodeHeight': '100',
// 'defaultJunctionPoint': 'tb',
// 'defaultNodeShape': 1,
// 'defaultLineShape': 4,
// 'defaultNodeBorderWidth': 0,
// 'defaultLineColor': 'rgba(0, 186, 189, 1)',
// 'defaultNodeColor': 'rgba(0, 206, 209, 1)',
// 'min_per_width': 40,
// 'max_per_width': 70,
// 'min_per_height': 200
// },
{
'label': '布局3',
'layoutName': 'tree',
'layoutClassName': 'seeks-layout-center',
useLayoutStyleOptions: true,
hideNodeContentByZoom:true,
'from': 'left',
'defaultNodeWidth': '100',
'defaultNodeHeight': '30',
'defaultJunctionPoint': 'lr',
'defaultNodeShape': 1,
'defaultLineShape': 6,
'defaultNodeBorderWidth': 0,
'defaultLineColor': '#c0c0c0',
'defaultNodeColor': '#ffa00b',
'min_per_width': 200,
'max_per_width': 400,
'min_per_height': 40,
'max_per_height': 70,
'defaultExpandHolderPosition':'right',
'defaultLineWidth':3
}
],
defaultJunctionPoint: 'border'
// 这里可以参考"Graph 图谱"中的参数进行设置
}
};
},
mounted() {
// this.$notify({
// title: '提示：',
// message: '点击右侧工具栏中的"布局"按钮来切换',
// type: 'success',
// duration: 10000
// });
this.showSeeksGraph();
},
methods: {
showSeeksGraph() {
const __graph_json_data = {
'rootId': 'a',
'nodes': [
{ 'id': 'a', 'text': 'a' },
{ 'id': 'b', 'text': 'b-固定数据展开/关闭' },
{ 'id': 'b1', 'text': 'b1' },
{ 'id': 'b1-1', 'text': 'b1-1' },
{ 'id': 'b1-2', 'text': 'b1-2' },
{ 'id': 'b1-3', 'text': 'b1-3' },
{ 'id': 'b1-4', 'text': 'b1-4' },
{ 'id': 'b1-5', 'text': 'b1-5' },
{ 'id': 'b1-6', 'text': 'b1-6' },
{ 'id': 'b2', 'text': 'b2' },
{ 'id': 'b2-1', 'text': 'b2-1' },
{ 'id': 'b2-2', 'text': 'b2-2' },
{ 'id': 'c', 'text': 'c-动态数据展开/关闭' },
{ 'id': 'c1', 'text': 'c1-动态获取子节点', expandHolderPosition: 'right', expanded: false, data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false }},
{ 'id': 'c2', 'text': 'c2-动态获取子节点', expandHolderPosition: 'right', expanded: false, data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false }},
{ 'id': 'c3', 'text': 'c3-动态获取子节点', expandHolderPosition: 'right', expanded: false, data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false }}],
'lines': [
{ 'from': 'a', 'to': 'b' },
{ 'from': 'b', 'to': 'b1' },
{ 'from': 'b1', 'to': 'b1-1' },
{ 'from': 'b1', 'to': 'b1-2' },
{ 'from': 'b1', 'to': 'b1-3' },
{ 'from': 'b1', 'to': 'b1-4' },
{ 'from': 'b1', 'to': 'b1-5' },
{ 'from': 'b1', 'to': 'b1-6' },
{ 'from': 'b', 'to': 'b2' },
{ 'from': 'b2', 'to': 'b2-1' },
{ 'from': 'b2', 'to': 'b2-2' },
{ 'from': 'a', 'to': 'c' },
{ 'from': 'c', 'to': 'c1' },
{ 'from': 'c', 'to': 'c2' },
{ 'from': 'c', 'to': 'c3' }]
}
// const __graph_json_data = test
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => {
// 这些写上当图谱初始化完成后需要执行的代码
// console.log(this.$refs.seeksRelationGraph.getInstance().getLinks())
});
},
onNodeClick(nodeObject, $event) {
console.log('onNodeClick:', nodeObject);
const allLinks = this.$refs.seeksRelationGraph.getLinks();
allLinks.forEach(link => { // 还原所有样式
link.relations.forEach(line => {
line.color = "#c0c0c0";
line.lineWidth = 3;
});
});
let fromNodeList = []
let toNodeList = []
this.getFromNode(allLinks,nodeObject,fromNodeList)
this.getToNode(allLinks,nodeObject,toNodeList)
// fromNodeList.forEach(item=>{
// console.log(item.fromNode.id + "->"+item.toNode.id)
// })
// toNodeList.forEach(item=>{
// console.log(item.fromNode.id + "->"+item.toNode.id)
// })
toNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
console.log(link.fromNode)
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
fromNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
console.log(link.fromNode)
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
// 让与{nodeObject}相关的所有连线高亮
// allLinks.filter(link => (link.fromNode === nodeObject || link.toNode === nodeObject)).forEach(link => {
// console.log(link.fromNode)
// link.relations.forEach(line => {
// console.log('line:', line);
// line.data.orignColor = line.color;
// line.data.orignFontColor = line.fontColor || line.color;
// line.data.orignLineWidth = line.lineWidth || 1;
// line.lineWidth = 3;
// });
// });
// // 有时候更改一些属性后，并不能马上同步到视图，这需要以下方法让视图强制根据数据同步到最新
this.$refs.seeksRelationGraph.getInstance().dataUpdated();
},
getFromNode(allLinks,node,fromNodeList){
let linkList = allLinks.filter(link => (link.toNode === node))
if(linkList.length > 0){
linkList.forEach(link =>{
fromNodeList.push({fromNode:link.fromNode,toNode:node})
this.getFromNode(allLinks,link.fromNode,fromNodeList)
})
}
},
getToNode(allLinks,node,toNodeList){
let linkList = allLinks.filter(link => (link.fromNode === node))
if(linkList.length > 0){
linkList.forEach(link =>{
toNodeList.push({fromNode:node,toNode:link.toNode})
this.getToNode(allLinks,link.toNode,toNodeList)
})
}
},
onLineClick(lineObject, linkObject, $event) {
console.log('onLineClick:', linkObject);
const allLinks = this.$refs.seeksRelationGraph.getLinks();
allLinks.forEach(link => { // 还原所有样式
link.relations.forEach(line => {
line.color = "#c0c0c0";
line.lineWidth = 3;
});
});
let fromNodeList = []
let toNodeList = []
this.getFromNode(allLinks,linkObject.fromNode,fromNodeList)
this.getToNode(allLinks,linkObject.toNode,toNodeList)
toNodeList.push({fromNode:linkObject.fromNode,toNode:linkObject.toNode})
fromNodeList.forEach(item=>{
console.log(item.fromNode.id + "->"+item.toNode.id)
})
toNodeList.forEach(item=>{
console.log(item.fromNode.id + "->"+item.toNode.id)
})
toNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
fromNodeList.forEach(item=>{
allLinks.filter(link => (link.fromNode === item.fromNode && link.toNode === item.toNode)).forEach(link => {
console.log(link.fromNode)
link.relations.forEach(line => {
line.color = "#ffa00b"
line.lineWidth = 5;
});
});
})
this.$refs.seeksRelationGraph.getInstance().dataUpdated();
},
onNodeExpand(node,e){
console.log('onNodeExpand:', node);
// 根据具体的业务需要决定是否需要从后台加载数据
if (!node.data.isNeedLoadDataFromRemoteServer) {
console.log('这个节点的子节点已经加载过了');
// this.$refs.seeksRelationGraph.refresh();
return;
}
// 判断是否已经动态加载数据了
if (node.data.childrenLoaded) {
console.log('这个节点的子节点已经加载过了');
// this.$refs.seeksRelationGraph.refresh();
return;
}
this.g_loading = true;
node.data.childrenLoaded = true;
this.loadChildNodesFromRemoteServer(node, new_data => {
this.g_loading = false;
this.$refs.seeksRelationGraph.getInstance().appendJsonData(new_data, (graphInstance) => {
// 这些写上当图谱初始化完成后需要执行的代码
});
});
},
loadChildNodesFromRemoteServer(node, callback) {
setTimeout(function() {
const _new_json_data = {
nodes: [
{ id: node.id + '-child-1', text: node.id + '-的动态子节点1', width: 150 },
{ id: node.id + '-child-2', text: node.id + '-的动态子节点2', width: 150 },
{ id: node.id + '-child-3', text: node.id + '-的动态子节点3', width: 150 }
],
lines: [
{ from: node.id, to: node.id + '-child-1' },
{ from: node.id, to: node.id + '-child-2' },
{ from: node.id, to: node.id + '-child-3'}
]
};
callback(_new_json_data);
}, 1000);
}
}
};
</script>
<!--<style lang="scss">-->
<!--</style>-->
<!--<style lang="scss" scoped>-->
<!--</style>-->
六、运行结果
转载自:https://juejin.cn/post/7235216665431277625