VUE和Antv G6实现在线拓扑图编辑操作


Posted in Javascript onOctober 28, 2020

效果图如下:

VUE和Antv G6实现在线拓扑图编辑操作

我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便。不过2.0的比较简单,容易上手。

1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件。

也可以npm 方式引入。

2.写组件

export default {
name: “index”,
components: {},
mounted() {
this.initG6();
},
data() {
return {
action: ‘',
name: ‘',
func: ‘',
account: ‘',
workflow: ‘',
nodeType: 0,
color: ‘',
net: ‘',
Util: ‘',
workflowName: ‘',
activation: ‘', //当前激活的节点
isNode: false, //当前是节点
isBlank: true, //当前是空白区
checked: true, //网格对齐
infoTitle: ‘画布',//属性标题
oldColor: ‘', //获取节点本身颜色
type: ‘', //有值为编辑状态
actionList:[],
nodeTypeList: [
{id: 0, label: ‘普通节点'}]
}
},
methods: {
initG6() {
let self = this;
self.Util = G6.Util;
let grid;
if (self.checked) {
grid = {
forceAlign: true, // 是否支持网格对齐
cell: 25, // 网格大小
};
} else {
grid = null;
}

// 生成度量
. . . . . .
// 工具方法
. . . . . .
var sourcesData={ }; //后台返回的数据

var trainScale = function(dim, scale){
var max = -Infinity;
var min = Infinity;
sourcesData.source.nodes.map(function(node){
max =30;
min =25;

});
scale.domain([min, max]);
};
var colors = ['#007AE7', ‘#40BCD2', ‘#81D6C3', ‘#C1E4BC', ‘#FFDD9B', ‘#FEAC4C', ‘#FF7C01', ‘#C4201D'];
. . . . . .
// 生成图
http://self.net = new http://G6.Net({
id: ‘knowledge', // 容器ID
height: canvasHeight, // 画布高
mode: ‘edit'
});
G6.Global.nodeLabelStyle = {
fill: ‘#fff',
textAlign: ‘left',
textBaseline: ‘bottom',
fontSize:24
};
self.net.tooltip(true);
self.net.node()
.size(function(model){
return sizeScale(model.weight)*2;
})
;
self.net.source(sourcesData.source.nodes, sourcesData.source.edges);
self.net.removeBehaviour([‘dragCanvas', ‘dragHideEdges', ‘dragHideTexts']);
self.net.addBehaviour([‘dragBlank']);
self.net.read(sourcesData);
self.net.render();
self.net.zoomAt(graphCenterX, graphCenterY, 0.7);
// 生成布局
var layoutNodes = sourcesData.source.nodes;
var layoutEdges = Util.clone(sourcesData.source.edges);
var ticked = function(){
self.net.updateNodesPosition();
};
…

/**
点击空白处
/
self.net.on(‘click', (ev) => {
if (!self.Util.isNull(ev.item)) {
self.isBlank = false
} else {
self.isBlank = true;
self.infoTitle = ‘画布'
}
});
/
点击节点
/
self.net.on(‘itemclick', function (ev) {
self.isNode = self.Util.isNode(ev.item); //是否为Node
self.activation = ev.item;
if (self.isNode) {
/ 激活节点后节点名称input聚焦/
self.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ick(()=>{ self.refs.inputFocus.$el.querySelector(‘input').focus();
});
self.infoTitle = ‘节点';
self.name = ev.item.get(‘model').label;
self.func = ev.item.get(‘model').func;
self.account = ev.item.get(‘model').account || [];
self.workflow = ev.item.get(‘model').workflow;
} else {
self.infoTitle = ‘边';
self.action = ev.item.get(‘model').action;
}
self.color = self.oldColor;
});
/**

鼠标移入移出事件改变颜色
/
self.net.on(‘itemmouseenter', ev => {
const item = ev.item;
self.oldColor = item.get(‘model').color; //获取节点颜色
self.net.update(item, {
color: ‘#108EE9',
});
self.net.refresh();
});
self.net.on(‘itemmouseleave', ev => {
const item = ev.item;
self.net.update(item, {
color: self.oldColor
});
self.net.refresh();
});
/*
提示信息
*/
self.net.tooltip({
title: ‘信息', // @type {String} 标题
split: ‘:', // @type {String} 分割符号
dx: 0, // @type {Number} 水平偏移
dy: 0 // @type {Number} 竖直偏移
});
self.net.edge().tooltip() .size(‘val', function(val){
return 3;
});

/**

渲染
*/
/self.net.source(self.nodes, self.edges);/ //加载资源数据
// self.net.render();
},
addCircle() {
},//添加起始节点
addRect() {
},//添加常规节点
addRhombus() {
}, //添加条件节点
addLine() {
}, //添加直线
addSmooth() {
}, //添加曲线
addArrowSmooth() {
}, //添加箭头曲线
addArrowLine() {
}, //添加箭头直线
addPolyLine() {
}, //添加折线
changeMode(mode) {
}, //拖拽与编辑模式的切换
del() {
this.net.del()
},//删除
save() {
/* 验证流图名称*/
if (this.workflowName !== ‘') {
let data = this.net.save();
if (data.source.nodes.length === 0) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 61: …; return false }̲ /* 验证节点名称*/ fo…message({type: ‘error', message: ‘节点名称不能为空'});
return false
}
}
data.source[‘name'] = this.workflowName;
/let json = JSON.stringify(data, null, 2);/
this.KaTeX parse error: Expected 'EOF', got '}' at position 43: …e, this.type); }̲ else { this.message({type: ‘error', message: ‘拓扑名称不能为空'})
}
/console.log(saveData, json);/
},//保存
update() {
}, //更新节点
clearView() {
this.type = ‘';
this.workflowName = ‘';
this.net.changeData()
}, //清空视图
source(nodes, edges, name, type) {
this.type = type;
this.workflowName = name;
this.net.changeData(nodes, edges)
}, //更新数据
},
watch: {
/**

监听输入框
/
action: function () {
this.update()
},
name: function () {
this.update()
},
func: function () {
this.update()
},
account: function () {
this.update()
},
workflow: function () {
this.update()
},
nodeType: function () {
this.update()
},
color: function () {
this.update()
},
/*
网格切换
*/
checked: function () {
let _saveData = this.net.save();
this.net.destroy(); //销毁画布
this.initG6();
this.net.read(_saveData);
this.net.render()
}
}
}

3.注意:

在实现过程中,我采用了度量的生成方法使节点均匀分布,否则需要指定节点的位置。不指定位置页面不会显示任何东西。

补充知识:antv G6关系树,拓扑图 不同层级不同颜色

前端菜鸡… 近期遇到一个需求,要求关系图每个层级不同颜色展示,位置还得随机,目前echart实现后都不太满意…em 于是G6 …

废话不多说 看代码(效果)//

1、引入G6 相关 (基础数据是官方的)

import G6 from '@antv/g6'


 fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
        .then(res => res.json())
        .then(data => {
         console.log(data)
          const width = document.getElementById('map').scrollWidth;
          const height = document.getElementById('map').scrollHeight || 500;
           const graph= new G6.TreeGraph({
            container: 'map',
            width,
            height,
            pixelRatio: 2,
            modes: {
              default: [{
                type: 'collapse-expand',
                onChange: function onChange(item, collapsed) {
                 console.log(item)
                  const data = item.get('model').data;
                  data.collapsed = collapsed;
                  return true;
                }
              }, 'drag-canvas', 'zoom-canvas']
            },
            defaultNode: {
              size: [200, 50],
              
              shape: 'rect',
             
              style: {
                fill: '#C6E5FF',
                stroke: '#5B8FF9'
              }
            },
            defaultEdge: {
              shape: 'cubic-horizontal',
              style: {
                stroke: '#A3B1BF'
              }
            },
            layout: {
              type: 'mindmap',
              direction: 'H',
              getHeight: () => {
                return 40;
              },
              getWidth: () => {
                return 160;
              },
              getVGap: () => {
                return 10;
              },
              getHGap: () => {
                return 100;
              }
            }
          });
          
          let centerX = 0;
          // 以下重点
          graph.node(function (node) {
            // depth 类似节点标识
            if(node.depth == 0){
              console.log(node)
              return {
                size:[100,60],
                style:{
                  fill:'red',
                  // stroke:''
                },
                label:node.id
              }
            }
       
            if(node.depth == 1){
              console.log(node)
              return {
                size:[100,60],
                style:{
                  fill:'blue',
               
                },
                label:node.id
              }
            }
            return {
              label: node.id, // 设置显示名称
              labelCfg: {
                // position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left', // 设置显示左右
                offset: 5
              }
            };
          });
          graph.data(data);
          graph.render();
          graph.fitView();
        });

这样效果就出来了. 不同级不同颜色 看图

VUE和Antv G6实现在线拓扑图编辑操作

以上这篇VUE和Antv G6实现在线拓扑图编辑操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 #Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 #Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
用Vue编写抽象组件的方法
2019/05/06 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
PyTorch预训练的实现
2019/09/18 Python
python列表推导式操作解析
2019/11/26 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Java平台和其他软件平台有什么不同
2015/06/05 面试题
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
医药类个人求职的自我评价
2014/02/12 职场文书
个人贷款担保书
2014/04/01 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
员工生日活动方案
2014/08/24 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
最感人的道歉情书
2015/05/12 职场文书
护理心得体会范文
2016/01/22 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Python 数据可视化之Seaborn详解
2021/11/02 Python