关于antV G6中的on事件、util.each事件及update方法等的使用总结
前言
antV G6相对而言是一个目前还处于较于不成熟的关系数据可视化引擎。因此在实习实现关系图的过程中遇到很大的坑。比如说高亮箭头及关联属性、关系图的缩放、以及由于G6是基于canvas原理所以无法对其绘制的节点局部添加事件。因此在此记录下自己在使用G6实现数据库关系图时使用到的一些及技术点。
一、关于G6中的on 事件
on 事件监听
参数 eventName｛String｝ 事件名 callback｛function｝事件回调函数
事件对象
｛
currentItem， //drag 拖动子项
currentShape //drag 拖动图形
shape , //图形对象
item, //子项
domEvent, //原生的dom事件
x, //图的横坐标
y, // 图纵坐标
domX, // dom横坐标
domY, // dom纵坐标
action, // 数据变更动作 add、update、remove、changeData
toShape, // mouseleave、dragleave 到达的图形
toItem, // mouseleave、dragleave 到达的子项
}
形如：
//1当点击选中某一个节点时对它做处理
net.on('itemclick', function(ev){
const item = ev.item;
if(net.isNode(item)){ //判断对象是node
.......
}else if（net.isEdge(item)）{//判断如果对象是edge
.........
}
二、关于G6中的鼠标事件
G6中关于on也定义了， 鼠标事件 ：此类事件可以与前缀'','node','edge','item'等自由组合使用。
graph.on('click', (ev)=>{}); // 鼠标左键点击事件
graph.on('dblclick', (ev)=>{}); // 鼠标左键双击事件
graph.on('mouseenter', (ev)=>{}); // 鼠标移入事件
graph.on('mouseleave', (ev)=>{}); // 鼠标移除事件
graph.on('mousedown', (ev)=>{}); // 鼠标按下事件
graph.on('mouseup', (ev)=>{}); // 鼠标抬起事件
graph.on('mousemove', (ev)=>{}); // 鼠标移动事件
graph.on('dragstart', (ev)=>{}); // 鼠标开始拖拽事件
graph.on('drag', (ev)=>{}); // 鼠标拖拽事件
graph.on('dragend', (ev)=>{}); // 鼠标拖拽结束事件
graph.on('dragenter', (ev)=>{}); // 鼠标拖拽进入事件
graph.on('dragleave', (ev)=>{}); // 鼠标拖拽移出事件
graph.on('drop', (ev)=>{}); // 鼠标拖拽放置事件
graph.on('contextmenu', (ev)=>{}); // 菜单事件
其它事件
graph.on('keydown', function(ev){}); // 键盘按键按下事件
graph.on('keyup', function(ev){}); // 键盘按键抬起事件
graph.on('mousewheel', function(ev){}); // 鼠标滚轮事件
graph.on('beforechangesize', function(ev){}) // 画布尺寸变化前
graph.on('afterchangesize', function(ev){}) // 画布尺寸变化后
graph.on('beforeviewportchange', function(ev){}) // 视口变化前
graph.on('afterviewportchange', function(ev){}) // 视口变化后
graph.on('beforechange', function(ev){}) // 子项数据变化前
graph.on('afterchange', function(ev){}) // 子项数据变化后
三、关于一些方法
(1)find -----查询方法
net.find 或者graph.find(id); //前者为旧版，后者为新版
其中参数：id ｛string｝项 id
返回 item{object || undefined}
查询成功返回项对象，否则返回 undefinde
eg:
let current_tablename=net.find(ev.item.get('model').id).get('model').name;
(2)add ------添加方法
新增项
graph.add(type,model)
参数 type {string} 项类型 可以是 node 、edge 、guide model {object} 数据模型
(3)update ---更新项（需要对数据有一些局部更新时，比如某个node节点、或edge等有什么样式或数据的更改可以使用此方法）记得灵活使用。
参数： item {string || object} 项对象 或项id model{object} 数据模型
示例：
net.update(item, { //为项对象
color: 'red'
});
net.update(from_id,{ //即为 id对象
color:'red',
fields:fromfields
});
四、each{Function}-------遍历数组或对象
/*
遍历数组或者对象
@param {Object|Array} element/Object 数组中元素或对象的值
@param {Function} func 遍历的函数 function(elememt,index){} 或者 function(value,key){}
*/
G6.Util.each(elements,func);
eg:
let current_fields=net.find(ev.item.get('model').id).get('model').fields;//获取关联表中的字段
let this_fields=[];
Util.each(current_fields,function(field, i){
let str = field.field;
str = str.replace(/<[^>]+>/g,"");
this_fields.push(str);
// fields+=str+"\n";
});
五、总结
对于antV G6里面的使用主要用到以上几个方法。通过历时半个月的时间，而且自己正处于它版本更迭的期间学习使用的，前期学习旧版的一些知识在新版上是不可行的，因此花费了自己大量的时间在这上面。不过个人感觉相比D3等其它可视化工具的学习成本而言，对于短期要实现关系图，选择antV G6相对明智。尽管它的文档实例等并不全面，而且处于早期开发中。
如果想要更加深入的了解，可上官网学习或加入他们的钉钉群。