vue使用GraphVis开发无限拓展的关系图谱的实现 vue使用GraphVis开发无限拓展的关

1、去GraphVis官网下载对应的js，新版和旧版的js有所不同，看自己需求引入旧版还是新版（GraphVis官方网址：http://www.graphvis.cn/）

visgraph.min.js （基本配置js）
visgraph-layout.min.js（配置布局js）

2、在需要的vue文件引入js文件

import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js' // 自己对应的js文件位置import LayoutFactory from '@/assets/js/GraphVis/old/visgraph-layout.min.js' // 自己对应的js文件位置export default { components: { VisGraph, LayoutFactory } }

3、加载画布和配置
配置(自己根据需求修改配置)：

config: {// 节点配置node: {label: { // 标签配置show: true, // 是否显示color: '250,250,250', // 字体颜色font: 'normal 14px Microsoft YaHei', // 字体大小及类型textPosition: 'Middle_Center', // 字体位置wrapText: true // 节点包裹文字(该属性为true时只对于字体位置为Middle_Center时有效)},shape: 'circle', // 节点形状 circle,rect,square,ellipse,triangle,star,polygon,text// width: 60, // 节点宽度(只对于shape为rect时有效)// height: 60, // 节点高度(只对于shape为rect时有效)color: '62,160,250', // 节点颜色borderColor: '62,160,250', // 节点边框颜色borderWidth: 0, // 节点边框宽度borderRadius: 0, // 节点圆角lineDash: [0], // 节点边框线条类型 [0] 表示实线 [5,8] 表示虚线 borderWidth > 0有效alpha: 1, // 节点透明度size: 60, // 节点大小selected: { // 节点选中后样式borderColor: '136,198,255', // 选中时边框颜色borderAlpha: 1, // 选中时的边框透明borderWidth: 3, // 选中是的边框宽度showShadow: true, // 是否展示阴影shadowColor: '136,198,255' // 选中是的阴影颜色}},// 线条配置link: {label: { // 标签配置show: true, // 是否显示color: '100,100,200', // 标签颜色font: 'normal 10px Arial' // 标签文字大小及类型},lineType: 'direct', // 线条类型direct,curver,vlink,hlink,bezier,vbezier,hbeziercolorType: 'defined', // 连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色，defined:自定义color: '200,200,200', // 线条颜色alpha: 1, // 连线透明度lineWidth: 1, // 连线宽度lineDash: [0], // 虚线间隔样式如：[5,8]showArrow: true, // 显示箭头selected: { // 选中时的样式设置color: '20,250,50', // 选中时的颜色alpha: 1, // 选中时的透明度lineWidth: 4, // 选中线条宽度showShadow: true, // 显示阴影shadowColor: '50,250,50' // 阴影颜色}},highLightNeiber: true, // 相邻节点高度标志wheelZoom: 0.8 // 滚轮缩放开关，不使用时不设置[0,1]}

加载画布：

this.visgraph = new VisGraph(document.getElementById(this.canvasId),this.canvasConfig)this.visgraph.clearAll()this.visgraph.drawData(this.graphData)

4、拓展功能：
无限拓展子节点，双击节点触发（ondblClick）：

this.visgraph.restoreHightLight() // 取消高亮const allNodes = this.visgraph.getVisibleData()this.currentNode.push(node.id)allNodes.nodes.forEach(item => {if (this.currentNode.indexOf(item.id) === (-1)) {this.visgraph.deleteNode(item)}})const findNodeNum = Math.round(Math.random() * 50)const increamData = https://www.it610.com/article/this.buildIncreamData(node, findNodeNum)this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links)this.visgraph.translateToCenter()

完整代码（relation.vue）：

#container {width: 100%; position: relative; #graph-panel {width:100%; height:100%; background:#9dadc1; position: absolute; z-index: 1; }/* 测试菜单栏 */.left-toolbar {position: absolute; top: 0; left: 0; z-index: 1000; width: 45px; height: 100%; background-color: #fafafa; border-right: 1px solid #e5e2e2; ul {li {text-align: center; height: 35px; color: #066fba; line-height: 35px; cursor: pointer; padding: 0; i {font-size: 18px; }&:hover {background-color: #6ea36d; color: #fff; }}}}/* 右键弹框样式 */.nodeMenuDialog {display: none; position: absolute; min-width: 100px; padding: 2px 3px; margin: 0; border: 1px solid #e3e6eb; background: #f9f9f9; color: #333; z-index: 100; border-radius: 5px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); transform: translate(0, 15px) scale(0.95); transition: transform 0.1s ease-out, opacity 0.1s ease-out; overflow: hidden; cursor: pointer; li {display: block; position: relative; margin: 0; padding: 0 10px; border-radius: 5px; white-space: nowrap; line-height: 30px; text-align: center; &:hover {background-color: #c3e5fd; }}}/* 节点信息弹框 */.nodeInfo {.nodeInfoForm {padding: 20px 20px 0 20px; border: solid 1px #dcdfe6; border-left: none; border-right: none; margin: 20px 0; }.nodeInfoRelation {padding: 0 20px; .nodeInfo-table {width: 100%; overflow-y: scroll; th {width: 50%; border: 1px solid #ebeef5; padding: 9px 0 9px 9px; text-align: left; &:first-child {border-right: none; }}td {width: 50%; border: 1px solid #ebeef5; border-top: none; padding: 9px 0 9px 9px; &:first-child {border-right: none; }}}/deep/ .el-badge__content.is-fixed {top: 24px; right: -7px; }p {text-align: center; padding: 20px 0; }}.nodeInfoAttribute {padding: 0 20px; }}/* 节点配置弹框 */.nodeConfig {padding: 20px 20px 0 20px; border: solid 1px #dcdfe6; border-left: none; border-right: none; margin: 20px 0; .form-color {display: flex; justify-content: space-between; .form-input {width: calc(100% - 50px); }}.save-setting {width: 100%; margin-bottom: 20px; .el-button {width: 100%; }}}}

注：引入两个js的文件eslint会报错，可以把这个文件忽略，不使用eslint的可以忽略。同时该项目还基于element-ui开发，引入screenfull全屏插件，还有阿里图标库图标，自己按需引入。
Demo演示：

【vue使用GraphVis开发无限拓展的关系图谱的实现】到此这篇关于vue使用GraphVis开发无限拓展的关系图谱的实现的文章就介绍到这了,更多相关vue GraphVis关系图谱内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！