关于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相对明智。尽管它的文档实例等并不全面，而且处于早期开发中。

如果想要更加深入的了解，可上官网学习或加入他们的钉钉群。