G6总结我学习G6看的几篇文章： 1、G6入门 2、关于antV G6中的on事件、util.each事件及update

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
我学习G6看的几篇文章：

1、拖拽、缩放——内置的交互行为在 G6 中使用内置 Behavior 的方式非常简单，只需要在图实例化时配置 modes。拖拽和缩放属于 G6 内置交互行为，修改代码如下：

const graph = new G6.Graph({
  // ...                                          // 其他配置项
  modes: {
    default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
  },
});

2、点击事件

     // 节点左击
      graph.on('node:click', function(evt) {
        //获取当前节点数据信息
        console.log('节点左击', evt)
        alert('节点左击')
      }),
        //  节点右击
      graph.on('node:contextmenu', function(evt) {
          //当前节点定位
          console.log('节点右击', evt)
          alert('节点右击')
      })

3、线路

      defaultEdge: {
          type: 'line',
          style: {
            endArrow: true,
            endArrow: {
              path: G6.Arrow.triangle(5, 10, 10), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 10,
                // path: G6.Arrow.triangle(5, 10, 10),
                // d: 8
                // path: 'M 0,0 L 8,4 L 8,-4 Z',
                // fill: '#e2e2e2'
              fill: '#ccc'
            },
            style: {
              stroke: '#eaff8f',
              lineWidth: 0
            }
          }
        }

4、布局

     layout: {
          type: 'dagre',
          rankdir: 'LR'
     },

5、贝塞尔曲线 + 线上加圆点 6、填充颜色

 style: {
   fill: '#67c23a' ,
   lineWidth: 1
 },

7、线上加文字

edges  数据：
     target: item.target,
     source: item.source,
     style: item.style,
     label: '正在执行',

8、节点使用图片

nodes  数据：
	shape: 'image',
	img: this.pngSrc,
	size: item.type == '1' ? [50, 50] : 50,

9、画布的清空

 this.graph.destroy()
 this.init()

10、画布自适应显示全部的节点

	fitView:'autoZoom',

11、缩略图

    const minimap = new G6.Minimap({
        size: [100, 100],
        className: 'minimap',
        type: 'delegate'
      })
	plugins: [minimap]  //配置插件

12、更新节点，不重新绘制

		const node = this.graph.findById(id)
        this.graph.updateItem(node, {
          //节点大小
          size: 50,
          // 节点上文本的样式
          labelCfg: {
            style: {
              fill: '#000',
              fontSize: 15
            }
          }
        })

12、动态计算长度（解决label文字长短不一的方案）

nodeStyleConfig(label) {
      let width = label.length
      let height = 30
      let size
      let reg = /[a-z,A-Z,_]/
      if (reg.test(label)) {
        size = [(width * this.fontSize) / 2 + 30, height]
      } else {
        size = [width * this.fontSize, height]
      }
      return size
    },

13、保持缩放比例

//在拉取新数据重新渲染页面之前先获取当前缩放比例
const zoom = graph.getZoom();

//此处获取数据
await getData()

//缩放至之前的比例
graph.zoomTo(zoom);

14、保持画布位置

//在拉取新数据重新渲染页面之前先获取点（0， 0）在画布上的位置
const lastPoint = graph.getCanvasByPoint(0, 0);

//此处获取数据。。。
await getData()

//获取重新渲染之后点（0， 0）在画布的位置
const newPoint = graph.getCanvasByPoint(0, 0);

//移动画布相对位移
graph.translate(lastPoint.x - newPoint.x, lastPoint.y - newPoint.y);

本文已参与「新人创作礼」活动，一起开启掘金创作之路。