ANTVG6详解

一、AntVG6官网

AntVG6是阿里巴巴AntV团队出品的图形绘制库，可以用于构建各种类型的交互式图表。AntVG6的官网（https://g6.antv.vision/zh/docs/manual/overview）提供了详细的文档和示例，可以帮助开发者快速入门。

AntVG6官网提供了完善的API文档，包括了各种图表类型的配置、布局、事件绑定等。官网还提供了丰富的示例代码，展示了AntVG6的各种用法，例如基础图形、图形编辑、图形动画等。

import G6 from '@antv/g6';

// 创建一个基本的节点
const node = {
  data: {
    id: 'node1',
    label: 'Node 1'
  },
  x: 100,
  y: 100
};

// 创建一个基本的边
const edge = {
  data: {
    source: 'node1',
    target: 'node2'
  }
};

// 创建一个图形实例
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});

// 将节点和边添加到图中
graph.add('node', node);
graph.add('edge', edge);

二、AntVG6官方文档

在AntVG6的官方文档中，提供了非常详细和全面的API文档、图表类型展示、示例代码等，可以让开发者快速入手。

AntVG6的官方文档中还提供了各种图表类型的详细介绍，包括树图、Force布局、空间图等。当然，在官方文档中还提供了可视化编辑器G6-Editor的使用说明和示例。

import G6 from '@antv/g6';

// 创建一个基本的节点
const node = {
  data: {
    id: 'node1',
    label: 'Node 1'
  },
  x: 100,
  y: 100
};

// 创建一个基本的边
const edge = {
  data: {
    source: 'node1',
    target: 'node2'
  }
};

// 创建一个图形实例
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  modes: {
    default: ['drag-node']
  }
});

// 将节点和边添加到图中
graph.add('node', node);
graph.add('edge', edge);

// 绑定事件
graph.on('node:selected', (e) => {
  console.log('node selected', e);
});

三、AntVG6在IE11渲染不出来

AntVG6是基于HTML5 Canvas和WebGL技术来实现的，所以在IE11等低版本浏览器中会存在不兼容的问题，如不能正常渲染。

如果需要使用AntVG6在低版本浏览器中正常运行，可以尝试使用AntVG6的兼容版本AntVG4或者将浏览器升级到最新版。

四、AntvG6节点扩展

AntVG6提供了自定义节点的接口，可以让开发者根据需求来扩展自己的节点。可以通过节点的shape属性来指定自定义节点的绘制，也可以通过添加自定义的属性来实现节点的样式、功能等扩展。

import G6 from '@antv/g6';

// 自定义节点
G6.registerNode('custom-node', {
  draw(cfg, group) {
    const shape = group.addShape('rect', {
      attrs: {
        x: -50,
        y: -25,
        width: 100,
        height: 50,
        fill: '#fff'
      }
    });

    const text = group.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        textAlign: 'center',
        textBaseline: 'middle',
        text: cfg.label,
        fill: '#000'
      }
    });

    return shape;
  }
});

// 创建自定义节点
const customNode = {
  data: {
    id: 'custom-node',
    label: 'Custom Node'
  },
  shape: 'custom-node',
  x: 100,
  y: 100
};

// 创建图形实例
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});

// 将节点添加到图中
graph.add('node', customNode);

五、AntvG6流量追踪图

AntVG6常用于制作流程图或者拓扑图等。例如下面的流量追踪图:

import G6 from '@antv/g6';

// 创建一个节点
const node = {
  data: {
    id: 'node1',
    label: '首页'
  },
  x: 150,
  y: 50
};

// 创建多个连线
const edges = [
  {
    source: 'node1',
    target: 'node2',
    label: '登录'
  },
  {
    source: 'node2',
    target: 'node3',
    label: '浏览商品'
  },
  {
    source: 'node3',
    target: 'node4',
    label: '提交订单'
  }
];

// 创建多个节点
const nodes = [
  {
    data: {
      id: 'node2',
      label: '登录页'
    },
    x: 150,
    y: 150
  },
  {
    data: {
      id: 'node3',
      label: '商品页'
    },
    x: 150,
    y: 250
  },
  {
    data: {
      id: 'node4',
      label: '确认订单'
    },
    x: 150,
    y: 350
  }
];

// 创建流量追踪图
const flowGraph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});

flowGraph.add('node', node);

nodes.forEach((n) => {
  flowGraph.add('node', n);
});

edges.forEach((e) => {
  flowGraph.add('edge', e);
});

六、AntvG6节点文字换行

AntVG6节点中的文字默认是单行显示的，如果需要多行显示可以使用\n或者
标签进行换行。

import G6 from '@antv/g6';

// 创建一个节点
const node = {
  data: {
    id: 'node1',
    label: '大象是一种\n神奇的动物'
  },
  x: 150,
  y: 50
};

// 创建图形实例
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});

// 将节点添加到图中
graph.add('node', node);