Antv-G6的基础使用

一、Antv-G6 是什么？

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

二、使用步骤

1.安装引入

npm install --save @antv/g6 //安装命令
import G6 from '@antv/g6';    //在需要的js文件引入

2.创建容器

<div id="nodesG6"></div>

 3.数据准备

const data = {
  // 节点
  nodes: [
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 200 // Number，可选，节点位置的 y 值
    },
    {
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      x: 300, // Number，可选，节点位置的 x 值
      y: 200 // Number，可选，节点位置的 y 值
    }
  ],
  // 边线
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2' // String，必须，目标点 id
    }
  ]
};

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

4.创建实例

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

5.配置数据进行渲染

graph.data(data); // 读取2.2中的数据源
graph.render(); // 渲染

6.最终效果

三、更多配置信息

init(data) {
    // 画布宽高
    const width = document.getElementById('container').scrollWidth || 800;
    const height = document.getElementById('container').scrollHeight || 800;
    const graph = new G6.TreeGraph({

      container: 'container',  // 图的  DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象

      width, // 指定画布宽度，单位为 'px'。

      height, // 指定画布高度，单位为 'px'。

      fitView: true, // 是否开启画布自适应。开启后图自动适配画布大小。

      fitCenter: true, //v3.5.1 后支持。开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView

      minZoom: 1.5, // 最小缩放比例

      maxZoom: 1.5, // 最大缩放比例

      linkCenter: true,  // 指定边是否连入节点的中心
      // 设置画布的模式
      modes: { 
        default: [
          {

            type: 'collapse-expand', // 只适用于树图，展开或收起子树
            
            trigger: 'click', // 收起和展开节点分组的方式。支持 'click' 和 'dblclick' 两种方式。默认为 'dblclick'，即双击。
            
            onChange: function onChange(item, collapsed) { // onChange：收起或展开的回调函数。警告：V3.1.2 版本中将移除；
              const data = item.get('model').data;
              data.collapsed = collapsed;
              return true;
            },
          },

          'drag-canvas', // 拖拽画布；

          'zoom-canvas', // 缩放画布；
        ],
      },
      // 默认状态下节点的配置，会被写入的 data 覆盖。      
      defaultNode: {
        type: 'circle', //节点形状circle，rect，ellipse，diamond，triangle，star，image，modelRect，

        size: 26,// size 是单个数字，表示直径
        // 指定边连入节点的连接点的位置（相对于该节点而言），可以为空。例如: [0, 0]，代表节点左上角的锚点，[1, 1],代表节点右下角的锚点
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
        // 节点样式
        style: {

          fill: '#C6E5FF',// 节点填充色

          stroke: '#5B8FF9',// 节点的描边颜色，''就是没颜色的意思

          cursor:'pointer',// 鼠标在该节点上时的鼠标样式
          lineWidth:5,//描边宽度
          lineDash:5,//描边虚线，数组代表实、虚长度         
        },

        labelCfg: { //配置标签文本
          position:'center',//文本相对于节点的位置，目前支持的位置有：'center'，'top'，'left'，'right'，'bottom'。默认为 'center'。

          style: { // 标签的样式属性。

            fill: '#000000',// 文本颜色

            fontSize: 14, // 文本字体大小
          },
          offset:5,//文本的偏移
        },
      },
      // 默认状态下边的配置，会被写入的 data 覆盖。
      defaultEdge: {

        type: 'cubic-vertical', // 指定边的类型,G6 提供了9 种内置边，可以是内置边的类型名称，也可以是自定义边的名称。默认为 'line'

        style: { // 边的样式属性

          stroke: '#A3B1BF', // 边的颜色
        },
      },
      // 布局配置项，使用 type 字段指定使用的布局方式
      layout: {

        type: 'compactBox', // 布局名称

        direction: 'TB', // H / V / LR / RL / TB / BT // layout 的方向。
        // 下面的参数都是一个节点，当存在某些奇葩点节点的时候，可以通过以下控制
        // 节点 id 的回调函数
        getId: function getId(d) {
          return d.id;
        },
        // 节点高度的回调函数
        getHeight: function getHeight() {
          return 16;
        },
        // 节点宽度的回调函数
        getWidth: function getWidth() {
          return 16;
        },
        // 节点纵向间距的回调函数
        getVGap: function getVGap() {
          return 40;
        },
        // 节点横向间距的回调函数
        getHGap: function getHGap() {
          return 70;
        },
      },

      animate: true,       // 动画
    });



    graph.data(data);// 初始化的图数据

    graph.render();// 根据提供的数据渲染视图。

    graph.fitView();// 让画布内容适应视口
  }
//更多配置信息可查看官方文档介绍：https://g6.antv.antgroup.com/manual/introduction