antv G6事件方法小结

antv_G6——方法小结

鼠标事件 ：此类事件可以与前缀'','node','edge','item'等*组合使用。   如graph.on('onde:click', (ev)=>{});     
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){})          // 子项数据变化后

添加节点

graph.add(type,model)
 //参数 type   {string}  项类型 可以是 node 、edge 、guide model {object} 数据模型

控制节点样式（node可以是id）

graph.updateItem(node, {
  // 节点的样式
  style: {
    stroke: 'blue',
  },
});

控制高亮属性

graph.setItemState("产线3", "online", true);

销毁画布

graph.destroy();

外部用

const graph = new G6.TreeGraph({
       nodeStateStyles: {
          selected: {
            fill: textColor,
          },
          online: {
            fill: "#00FF00",
          },
          alarm: {
            fill: "#FF0000",
          },
          warn: {
            fill: "#FFFF00",
          },
        },
})
 //先在内部获取
this.chart=graph  //chart是data里面变量
//外部 添加节点
 this.chart.add(type,model)
 //参数 type   {string}  项类型 可以是 node 、edge 、guide model {object} 数据模型     
//控制节点样式
 this.chart.add(type,model)
 this.chart.updateItem(node, {
  // 节点的样式
  style: {
    stroke: 'blue',
  },
});
//控制高亮
 this.chart.setItemState("产线3", "online", true);

看得不够爽，请移步我其他vue—g6 demo博客

如：
https://blog.csdn.net/weixin_46476460/article/details/109116232
https://blog.csdn.net/weixin_46476460/article/details/108539163
https://blog.csdn.net/weixin_46476460/article/details/108518365