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