Relation Graph vue图谱
贴个官网：relation-graph:一个vue关系图谱组件
图谱，可拖拽、点击、在线配置、放大缩小、下载，个人认为这个组件很帅啦哈哈哈
贴个代码吧，需求是：具有树结构，默认一二三节点展开，其他节点收起，禁用拖拽，直线相连，节点可点击，点击alert当前节点
1、 引入relation-graph
npm install --save relation-graph2、示例代码：
import SeeksRelationGraph from 'relation-graph';
export default {
name: 'page-graph',
components: {SeeksRelationGraph},
mixins: [request],
data() {
return {
demoname: '---',
graphOptions: {
debug: true,
// 禁用拖拽
disableDragNode:true,
'backgrounImage': 'http://ai-mark.cn/images/ai-mark-desc.png',
'backgrounImageNoRepeat': true,
'layouts': [
{
'label': '中心',
'layoutName': 'tree',
'layoutClassName': 'seeks-layout-center',
'defaultJunctionPoint': 'border',
'defaultNodeShape': 0,
'defaultLineShape': 1,
'from': 'left',
// 通过这4个属性来调整 tree-层级距离&节点距离
'min_per_width': '200',
'max_per_width': '500',
'min_per_height': '40',
'max_per_height': '60',
// 如果此选项有值，则优先级高于上面那4个选项
'levelDistance': ''
}
],
// 箭头样式
'defaultLineMarker': {
'markerWidth': '0',
'markerHeight': '0',
'refX': '0',
'refY': '0'
},
'defaultExpandHolderPosition': 'right',
'defaultNodeShape': 1,
'defaultNodeWidth': '100',
'defaultLineShape': 4,
'defaultJunctionPoint': 'lr',
'defaultNodeBorderWidth': 0,
'defaultLineColor': 'rgba(0, 186, 189, 1)',
'defaultNodeColor': 'rgba(0, 206, 209, 1)'
}
};
},
mounted() {
this.demoname = this.$route.params.demoname;
this.setGraphData();
},
created() {
this.detailData = [];
},
methods: {
// 获取树数据
setGraphData() {
this.requestJson().then(res => {
this.detailData = res;
// 使用要点：通过节点属性expandHolderPosition: 'right' 和 expanded: false 可以让节点在没有子节点的情况下展示一个"展开"按钮
// 通过onNodeExpand事件监听节点，在被展开的时候有选择的去从后台获取数据，如果已经从后台加载过数据，则让当前图谱根据当前的节点重新布局
const __graph_json_data = {
'rootId': 'a',
'nodes': [
{
'id': 'a',
'text': 'a',
'children': [
{
'id': 'b',
'text': 'b',
'children': [
{
'id': 'b1',
'text': 'b1',
'children': [
{'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',
'children': [
{'id': 'b2-1', 'text': 'b2-1'},
{'id': 'b2-2', 'text': 'b2-2'}
]
}
]
},
{
'id': 'c',
'text': 'c',
'children': [
{'id': 'c1', 'text': 'c1'},
{'id': 'c2', 'text': 'c2'},
{'id': 'c3', 'text': 'c3'}
]
}
]
}
],
'links': [
// 你仍然可以通过常规方式添加关系
]
};
this.g_loading = false;
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
// 获取根节点的子节点，即可获得图谱第一层中的节点
const level_1_nodes = seeksRGGraph.getNodeById(__graph_json_data.rootId).lot.childs;
level_1_nodes.forEach(thisLevel1Node => {
const level_2_nodes = seeksRGGraph.getNodeById(thisLevel1Node.id).lot.childs;
level_2_nodes.forEach(thisLevel2Node => {
this.applyCollapseStyle2Node(thisLevel2Node);
});
// this.applyCollapseStyle2Node(thisLevel1Node);
});
this.$refs.seeksRelationGraph.refresh();
});
})
.catch(error => {
window.console.error(error);
});
},
// _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点
applyCollapseStyle2Node(_node) {
if (_node.lot.childs.length > 0) {
_node.lot.childs.forEach(thisChildNode => {
thisChildNode.isShow = false;
this.applyCollapseStyle2Node(thisChildNode);
});
_node.expanded = false;
_node.expandHolderPosition = 'right';
}
},
onNodeCollapse(node, e) {
// 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
this.$refs.seeksRelationGraph.refresh();
},
onNodeExpand(node, e) {
// 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
this.$refs.seeksRelationGraph.refresh();
},
// 点击节点
onNodeClick(nodeObject, $event) {
alert(nodeObject.text);
}
}
};
默认
点击展开
