Antv G6介绍

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。

安装

npm install @antv/g6

引用

<div ref="mountNode" style="width: 100vw;height: 100vh;"></div>

import G6 from '@antv/g6'

const data = {
  // 节点集合
  nodes: [
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 50, // Number，可选，节点位置的 y 值
      label: '节点一',
      img: require('@/assets/images/node1.png')
    },
    {
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
      label: '节点二',
      img: require('@/assets/images/node2.png')
    }
  ],
  // 边集合
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2' // String，必须，目标点 id
    }
  ]
}

this.graph = new G6.Graph({
    container: this.$refs.mountNode, // 图的 DOM 容器
    fitView: true, // 是否开启画布自适应。开启后图自动适配画布大小。
    fitViewPadding: 50, // 画布的padding值
    modes: {
      default: [
        'drag-canvas',
        'zoom-canvas',
        'drag-node',
        {
          type: 'create-edge', // 创建边
          trigger: 'click' // 'click' by default. options: 'drag', 'click'
        }
      ] // 允许拖拽画布、放缩画布、拖拽节点、设置高亮
    },
    // 节点默认配置
    defaultNode: {
      type: 'image', // 节点使用图片
      size: 60,
      labelCfg: {
        position: 'bottom',
        offset: 6,
        style: {
          fill: '#fff'
        }
      }
    },
    // 边默认配置
    defaultEdge: {
      type: 'polyline', // 使用折线
      style: {
        stroke: '#3296fa',
        lineWidth: 2
      }
    }
})

this.graph.read(data) // 接收数据，并进行渲染

常用方法

增加元素 addItem(type, model, stack)

名称	类型	是否必选	描述
type	string	true	元素类型，可选值为 'node'、'edge'
model	Object	true	元素的数据模型，具体内容参见元素配置项。
stack	boolean	false	操作是否入 undo & redo 栈，当实例化 Graph 时设置 enableStack 为 true 时，默认情况下会自动入栈，入栈以后，就支持 undo & redo 操作，如果不需要，则设置该参数为 false 即可

删除元素 removeItem(item, stack)

名称	类型	是否必选	描述
item	string / Object	true	元素 ID 或元素实例
stack	boolean	false	操作是否入 undo & redo 栈，当实例化 Graph 时设置 enableStack 为 true 时，默认情况下会自动入栈，入栈以后，就支持 undo & redo 操作，如果不需要，则设置该参数为 false 即可

更新元素 updateItem(item, model, stack)

名称	类型	是否必选	描述
item	string / Object	true	元素 ID 或元素实例
model	Object	true	需要更新的数据模型，具体内容参见元素配置项
stack	boolean	false	操作是否入 undo & redo 栈，当实例化 Graph 时设置 enableStack 为 true 时，默认情况下会自动入栈，入栈以后，就支持 undo & redo 操作，如果不需要，则设置该参数为 false 即可

获取图数据 save()

返回值
- 返回值类型：Object；
- 返回值包括所有节点和边，数据结构如下下所示：
{
  nodes: [],
  edges: [],
  groups: []
}