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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
如何手写简易的 Vue Router
Oct 10 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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之第六天
2006/10/09 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
Javascript验证方法大全
2015/09/21 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
python从Oracle读取数据生成图表
2020/10/14 Python
什么造成了Java里面的异常
2016/04/24 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
国贸专业自荐信范文
2014/03/02 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
2014年工商所工作总结
2014/12/09 职场文书
债务纠纷代理词
2015/05/25 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python