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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
js 图片懒加载的实现
Oct 21 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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+ajax实时刷新简单实例
2015/02/25 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
浅析从vue源码看观察者模式
2018/01/29 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
区分python中的进程与线程
2020/08/13 Python
python里glob模块知识点总结
2021/01/05 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
策划总监岗位职责
2014/02/16 职场文书
促销活动总结怎么写
2014/06/25 职场文书
春节超市活动方案
2014/08/14 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
单位介绍信格式范文
2015/05/04 职场文书
HAM-2000摩机图
2021/04/22 无线电
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
python3操作redis实现List列表实例
2021/08/04 Python