主流框架中快速使用 AntV G6图可视化

什么是 G6

G6 是一个前端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。让用户看到的数据关系变得透明，简单。

官方API文档：https://g6.antv.vision/zh/docs/api/Graph

一、安装 & 引用

 npm install --save @antv/g6  // 安装
 
 import G6 from '@antv/g6'  // 在需要用的 G6 的 JS 文件中导入

二、快速使用步骤

1. 创建关系图的 HTML 容器；
2. 数据准备；
3. 创建关系图；
4. 配置数据源，渲染。

1、创建容器

<div id="mountNode"></div>

2. 数据准备

const data = {
  nodes: [
    {
      id: '0',
      label: '0',
    },
    {
      id: '1',
      label: '1',
    },
    {
      id: '2',
      label: '2',
    },
    {
      id: '3',
      label: '3',
    }
  ],
  edges: [
    {
      source: '0',
      target: '1',
    },
    {
      source: '0',
      target: '2',
    },
    {
      source: '0',
      target: '3',
    }
  ]
};

nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性
edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。

3.创建关系图

const graph = new G6.Graph({
  container: 'mountNode',  // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  width: 800,              // Number，必须，图的宽度
  height: 500              // Number，必须，图的高度
});

4.配置数据源，渲染

graph.data(data);  // 读取 Step 2 中的数据源到图上
graph.render();    // 渲染图

最终图形

三、Demo代码详解

import G6 from '@antv/g6';    //先安装后引入

const data = {   // 数据，包含流程图的节点 和 边
  nodes: [
    {
      id: '0',
      label: '0',
    },
    {
      id: '1',
      label: '1',
    },
    {
      id: '2',
      label: '2',
    },
    {
      id: '3',
      label: '3',
    },
    {
      id: '4',
      label: '4',
    },
    {
      id: '5',
      label: '5',
    },
    {
      id: '6',
      label: '6',
    },
    {
      id: '7',
      label: '7',
    },
    {
      id: '8',
      label: '8',
    },
    {
      id: '9',
      label: '9',
    },
  ],
  edges: [
    {
      source: '0',
      target: '1',
    },
    {
      source: '0',
      target: '2',
    },
    {
      source: '0',
      target: '3',
    },
    {
      source: '0',
      target: '4',
    },
    {
      source: '0',
      target: '5',
    },
    {
      source: '0',
      target: '7',
    },
    {
      source: '0',
      target: '8',
    },
    {
      source: '0',
      target: '9',
    },
    {
      source: '2',
      target: '3',
    },
    {
      source: '4',
      target: '5',
    },
    {
      source: '4',
      target: '6',
    },
    {
      source: '5',
      target: '6',
    },
  ],
};

const tipDiv = document.createElement('div');
const graphDiv = document.getElementById('container');
graphDiv.appendChild(tipDiv);
const width = graphDiv.scrollWidth;
const height = graphDiv.scrollHeight;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'force',       // 流程图显示形式 'dagre'....
    preventOverlap: true,
    nodeSize: 20,
  },
  modes: {
    // 设置默认节点和默认边的地方，‘zoom-canvas’ 参数的作用是鼠标滚动可以对图形方法缩小
    default: ['drag-node', 'zoom-canvas'],
  },
  defaultNode: {
    size: 30,    //节点大小
    style: {
      fill: '#C6E5FF',    // 节点填充颜色
      stroke: '#5B8fF9',  // 节点边框颜色
    },
  },
  defaultEdge: {
    size: 1,     // 连线的粗细
    color: '#e2e2e2',  // 连线的颜色
    style: {
      endArrow: {     // 连线末端的箭头，不需要可以不设置
        path: 'M 0,0 L 8,4 L 8,-4 Z',
        fill: '#e2e2e2',
      },
    }
  },
});

graph.on('beforelayout', function () {    // 布局时机监听
  tipDiv.innerHTML =
    'Doing force-directed layout... the text will be changed after the layout being done.';
});

graph.on('afterlayout', function () {   // 布局完成
  tipDiv.innerHTML = 'Done!';
});

graph.data(data);     // 塞入数据
graph.render();       // 加载流程图