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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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+js iframe实现上传头像界面无跳转
2014/04/29 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python如何对齐字符串
2020/07/30 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
群胜软件Java笔试题
2012/09/29 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
汽车驾驶求职信
2013/10/25 职场文书
公司道歉信范文
2014/01/09 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
质量保证书
2015/01/17 职场文书
党员转正申请报告
2015/05/15 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
宇宙与人观后感
2015/06/05 职场文书
学生会部长竞选稿
2015/11/19 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL