G6 总结

我学习G6看的几篇文章：
1、G6入门
2、关于antV G6中的on事件、util.each事件及update方法等的使用总结
3、tooltip 节点提示框

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);

15、画布宽高为自适应

	  //parentContent 为父级 div
      this.canvasWidth = this.$refs.parentContent.clientWidth
      this.canvasHeight = this.$refs.parentContent.clientHeight
      this.graph = new G6.Graph({
        container: 'container',
        width: this.canvasWidth,
        height: this.canvasHeight
      })

15、tooltip 节点提示框

在这里插入图片描述

modes: {
    default: [
      'drag-canvas',
      'zoom-canvas',
      'drag-node',
      {
        type: 'tooltip',
        // offset: -50,
        formatText: function formatText(model) {
          return model.oriLabel || model.label          //   <----------- 关键
        },
        shouldUpdate: function shouldUpdate(e) {
          return true
        }
      }
    ] // 允许拖拽画布、放缩画布、拖拽节点
  }

16、G6画布大小自适应关键 ===> changeSize
浏览器窗口发生变化时，画布自适应窗口大小
G6图进行放大缩小，全屏操作

fullScreen() {
   this.isFullScreen = true
   this.$emit('isFullScreenFn', this.isFullScreen)
   // this.graph.destroy()
   setTimeout(() => {
     // this.render()
     var canvasWidth = parseInt(document.getElementsByClassName('bloodBorne')[0].offsetWidth)
     var canvasHeight = parseInt(document.getElementsByClassName('bloodBorne')[0].offsetHeight)
     this.graph.changeSize(canvasWidth, canvasHeight)
     //this.graph.fitCenter()  // 将图移动到画布中心位置
   }, 300)
 },

相关推荐