关于antVG6中的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当点击选中某⼀个节点时对它做处理
<('itemclick', function(ev){
const item = ev.item;
if(net.isNode(item)){ //判断对象是node
.......
}else if（net.isEdge(item)）{//判断如果对象是edge
.........
}
⼆、关于G6中的⿏标事件
G6中关于on也定义了， ⿏标事件 ：此类事件可以与前缀'','node','edge','item'等⾃由组合使⽤。
<('click', (ev)=>{});            // ⿏标左键点击事件
<('dblclick', (ev)=>{});          // ⿏标左键双击事件
<('mouseenter', (ev)=>{});        // ⿏标移⼊事件
<('mouseleave', (ev)=>{});        // ⿏标移除事件
<('mousedown', (ev)=>{});        // ⿏标按下事件
<('mouseup', (ev)=>{});          // ⿏标抬起事件
<('mousemove', (ev)=>{});        // ⿏标移动事件
<('dragstart', (ev)=>{});        // ⿏标开始拖拽事件
<('drag', (ev)=>{});              // ⿏标拖拽事件
<('dragend', (ev)=>{});          // ⿏标拖拽结束事件
<('dragenter', (ev)=>{});        // ⿏标拖拽进⼊事件
<('dragleave', (ev)=>{});        // ⿏标拖拽移出事件
<('drop', (ev)=>{});              // ⿏标拖拽放置事件
<('contextmenu', (ev)=>{});      // 菜单事件
其它事件
<('keydown', function(ev){});            // 键盘按键按下事件
<('keyup', function(ev){});              // 键盘按键抬起事件
<('mousewheel', function(ev){});          // ⿏标滚轮事件
<('beforechangesize', function(ev){})    // 画布尺⼨变化前
<('afterchangesize', function(ev){})      // 画布尺⼨变化后
mousemove是什么键
<('beforeviewportchange', function(ev){}) // 视⼝变化前
<('afterviewportchange', function(ev){})  // 视⼝变化后
<('beforechange', function(ev){})        // ⼦项数据变化前
<('afterchange', function(ev){})          // ⼦项数据变化后
三、关于⼀些⽅法
(1)find  -----查询⽅法
net.find  或者graph.find(id);      //前者为旧版，后者为新版
其中参数：id  ｛string｝项 id
返回      item{object || undefined}
查询成功返回项对象，否则返回 undefinde
eg:
let current_tablename=net.find(('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(('model').id).get('model').fields;//获取关联表中的字段
let this_fields=[];
Util.each(current_fields,function(field, i){
let str = field.field;
str = place(/<[^>]+>/g,"");
this_fields.push(str);
//  fields+=str+"\n";
});
五、总结
对于antV G6⾥⾯的使⽤主要⽤到以上⼏个⽅法。通过历时半个⽉的时间，⽽且⾃⼰正处于它版本更迭
的期间学习使⽤的，前期学习旧版的⼀些知识在新版上是不可⾏的，因此花费了⾃⼰⼤量的时间在这上⾯。不过个⼈感觉相⽐D3等其它可视化⼯具的学习成本⽽⾔，对于短期要实现关系图，选择antV G6相对明智。尽管它的⽂档实例等并不全⾯，⽽且处于早期开发中。
如果想要更加深⼊的了解，可上官⽹学习或加⼊他们的钉钉。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。