AntV G6 基礎元素詳解（React版） Detail - 前端,javascript,數據可視化銀之夏雪 Blog

一、初識 AntV G6

AntV G6 是螞蟻集團推出的專業級圖可視化引擎，適合構建關係圖譜、拓撲圖、流程圖等場景。相比其他圖形庫，G6 提供完整的佈局算法 和交互體系 ，開發者在 10 分鐘內即可搭建可交互的圖應用。

技術特點速覽：

支持 Canvas / SVG 雙渲染模式
內置 10+ 圖佈局算法
提供豐富的節點/邊類型
完善的文檔和 React 示例

二、節點（Nodes）完全指南

2.1 節點的核心屬性

interface Node {
  id: string;          // 必須！節點的唯一標識（類似身份證號）
  x?: number;          // 可選，X座標（不設置則自動佈局）
  y?: number;          // 可選，Y座標
  label?: string;      // 顯示的文字標籤
  type?: string;       // 節點類型（默認圓形，可自定義）
  style?: {            // 樣式配置
    fill?: string;     // 填充顏色
    stroke?: string;   // 邊框顏色
    lineWidth?: number;// 邊框粗細
  };
  // 其他自定義屬性...
}

█ 關鍵規則：

id 是必須且唯一 的，就像每個人的身份證號
如果多個節點使用相同id，會導致渲染異常
未設置x/y時，G6會自動計算佈局位置

2.2 基礎節點示例

// 正確的節點配置
const nodes = [
  { id: 'A', label: '服務器' }, 
  { id: 'B', x: 100, y: 200, type: 'rect' }
];

// 錯誤的配置 ❌
const badNodes = [
  { label: '節點1' }, // 缺少id
  { id: 'A' },       // 重複id
  { id: 'A' }
];

█ 在React中的使用示例：

function NodeDemo() {
  const data = {
    nodes: [
      { id: 'home', label: '家庭電腦', type: 'circle' },
      { id: 'cloud', label: '阿里雲', type: 'rect' }
    ],
    edges: [] // 暫時沒有連接
  };

  return <G6Graph data={data} />;
}

三、邊（Edges）完全指南

3.1 邊的核心屬性

interface Edge {
  source: string;      // 必須！起點節點id
  target: string;      // 必須！終點節點id
  label?: string;      // 邊的文字説明
  type?: string;       // 邊類型（直線/曲線等）
  style?: {            // 樣式配置
    stroke?: string;   // 線條顏色
    lineWidth?: number;// 線條粗細
    lineDash?: number[];// 虛線樣式
  };
}

█ 關鍵規則：

source和target必須指向已存在的節點id
如果引用了不存在的節點id，邊將不會顯示
邊的方向由source→target決定

3.2 基礎邊示例

// 正確的邊配置
const edges = [
  { source: 'A', target: 'B' },
  { source: 'B', target: 'C', label: '100Mbps' }
];

// 錯誤的配置 ❌
const badEdges = [
  { source: 'A' },              // 缺少target
  { source: 'X', target: 'Y' }, // X/Y節點不存在
  { target: 'B' }               // 缺少source
];

2.3 邊的連接原理

  節點A (id: 'server')
    ↓
  [邊：source指向'server'，target指向'client']
    ↓
  節點B (id: 'client')

█ 在React中的使用示例：

function EdgeDemo() {
  const data = {
    nodes: [
      { id: 'router', label: '路由器' },
      { id: 'pc', label: '辦公電腦' }
    ],
    edges: [
      { 
        source: 'router', 
        target: 'pc',
        label: '有線連接',
        style: {
          stroke: '#1890ff',
          lineDash: [5, 5] // 虛線效果
        }
      }
    ]
  };

  return <G6Graph data={data} />;
}

四、完整可運行示例

4.1 家庭網絡拓撲案例

import React from 'react';
import G6 from '@antv/g6';

function HomeNetwork() {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    if (!containerRef.current) return;

    // 創建圖實例
    const graph = new G6.Graph({
      container: containerRef.current,
      width: 800,
      height: 500,
      defaultNode: {
        size: 40,
        style: {
          fill: '#e6f7ff',
          stroke: '#1890ff'
        }
      },
      defaultEdge: {
        style: {
          stroke: '#91d5ff',
          lineWidth: 2
        }
      }
    });

    // 網絡拓撲數據
    const data = {
      nodes: [
        { id: 'modem', label: '光貓' },
        { id: 'router', label: '主路由器' },
        { id: 'pc1', label: '書房電腦' },
        { id: 'pc2', label: '卧室電腦' }
      ],
      edges: [
        { source: 'modem', target: 'router' },
        { source: 'router', target: 'pc1' },
        { source: 'router', target: 'pc2' }
      ]
    };

    graph.data(data);
    graph.render();

    return () => graph.destroy();
  }, []);

  return (
    <div>
      <h3>家庭網絡拓撲圖</h3>
      <div ref={containerRef} style={{ 
        border: '1px solid #f0f0f0',
        borderRadius: '8px',
        margin: '20px 0'
      }} />
    </div>
  );
}

如圖所示：

一、初識 AntV G6

技術特點速覽：

支持 Canvas / SVG 雙渲染模式
內置 10+ 圖佈局算法
提供豐富的節點/邊類型
完善的文檔和 React 示例

二、節點（Nodes）完全指南

2.1 節點的核心屬性

interface Node {
  id: string;          // 必須！節點的唯一標識（類似身份證號）
  x?: number;          // 可選，X座標（不設置則自動佈局）
  y?: number;          // 可選，Y座標
  label?: string;      // 顯示的文字標籤
  type?: string;       // 節點類型（默認圓形，可自定義）
  style?: {            // 樣式配置
    fill?: string;     // 填充顏色
    stroke?: string;   // 邊框顏色
    lineWidth?: number;// 邊框粗細
  };
  // 其他自定義屬性...
}

█ 關鍵規則：

id?是必須且唯一 的，就像每個人的身份證號
如果多個節點使用相同id，會導致渲染異常
未設置x/y時，G6會自動計算佈局位置

2.2 基礎節點示例

// 正確的節點配置
const nodes = [
  { id: 'A', label: '服務器' }, 
  { id: 'B', x: 100, y: 200, type: 'rect' }
];

// 錯誤的配置 ?
const badNodes = [
  { label: '節點1' }, // 缺少id
  { id: 'A' },       // 重複id
  { id: 'A' }
];

█ 在React中的使用示例：

function NodeDemo() {
  const data = {
    nodes: [
      { id: 'home', label: '家庭電腦', type: 'circle' },
      { id: 'cloud', label: '阿里雲', type: 'rect' }
    ],
    edges: [] // 暫時沒有連接
  };

  return <G6Graph data={data} />;
}

三、邊（Edges）完全指南

3.1 邊的核心屬性

interface Edge {
  source: string;      // 必須！起點節點id
  target: string;      // 必須！終點節點id
  label?: string;      // 邊的文字説明
  type?: string;       // 邊類型（直線/曲線等）
  style?: {            // 樣式配置
    stroke?: string;   // 線條顏色
    lineWidth?: number;// 線條粗細
    lineDash?: number[];// 虛線樣式
  };
}

█ 關鍵規則：

source和target必須指向已存在的節點id
如果引用了不存在的節點id，邊將不會顯示
邊的方向由source→target決定

3.2 基礎邊示例

// 正確的邊配置
const edges = [
  { source: 'A', target: 'B' },
  { source: 'B', target: 'C', label: '100Mbps' }
];

// 錯誤的配置 ?
const badEdges = [
  { source: 'A' },              // 缺少target
  { source: 'X', target: 'Y' }, // X/Y節點不存在
  { target: 'B' }               // 缺少source
];

2.3 邊的連接原理

  節點A (id: 'server')
    ↓
  [邊：source指向'server'，target指向'client']
    ↓
  節點B (id: 'client')

█ 在React中的使用示例：

function EdgeDemo() {
  const data = {
    nodes: [
      { id: 'router', label: '路由器' },
      { id: 'pc', label: '辦公電腦' }
    ],
    edges: [
      { 
        source: 'router', 
        target: 'pc',
        label: '有線連接',
        style: {
          stroke: '#1890ff',
          lineDash: [5, 5] // 虛線效果
        }
      }
    ]
  };

  return <G6Graph data={data} />;
}

四、完整可運行示例

4.1 家庭網絡拓撲案例

import React from 'react';
import G6 from '@antv/g6';

function HomeNetwork() {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    if (!containerRef.current) return;

    // 創建圖實例
    const graph = new G6.Graph({
      container: containerRef.current,
      width: 800,
      height: 500,
      defaultNode: {
        size: 40,
        style: {
          fill: '#e6f7ff',
          stroke: '#1890ff'
        }
      },
      defaultEdge: {
        style: {
          stroke: '#91d5ff',
          lineWidth: 2
        }
      }
    });

    // 網絡拓撲數據
    const data = {
      nodes: [
        { id: 'modem', label: '光貓' },
        { id: 'router', label: '主路由器' },
        { id: 'pc1', label: '書房電腦' },
        { id: 'pc2', label: '卧室電腦' }
      ],
      edges: [
        { source: 'modem', target: 'router' },
        { source: 'router', target: 'pc1' },
        { source: 'router', target: 'pc2' }
      ]
    };

    graph.data(data);
    graph.render();

    return () => graph.destroy();
  }, []);

  return (
    <div>
      <h3>家庭網絡拓撲圖</h3>
      <div ref={containerRef} style={{ 
        border: '1px solid #f0f0f0',
        borderRadius: '8px',
        margin: '20px 0'
      }} />
    </div>
  );
}

如圖所示：

在這裏插入圖片描述

4.2 代碼解析

節點定義 ：
- 4個網絡設備節點：光貓、主路由器、兩台電腦
- 每個節點都有唯一id和中文標籤
邊連接 ：
- 光貓 → 主路由器（WAN連接）
- 主路由器 → 各電腦（LAN連接）
樣式配置 ：
- 默認節點：天藍色填充，藍色邊框
- 默認邊：淺藍色實線

4.3 運行效果描述

將看到4個藍色圓形節點，標籤清晰可見
節點之間用淺藍色線條連接
自動佈局排列成樹狀結構
支持畫布拖拽和縮放操作

五、常見問題排查

5.1 節點不顯示？

? 檢查項：

確認所有節點都有id字段
檢查id是否重複
確認容器元素已正確掛載

5.2 邊不顯示？

? 檢查項：

確認source和target的值正確
檢查引用的節點id確實存在
確認邊數據在edges數組中

5.3 佈局混亂？

? 解決方案：

顯式設置節點座標：

nodes: [
  { id: 'A', x: 100, y: 100 },
  { id: 'B', x: 300, y: 200 }
]

使用佈局算法：

const graph = new G6.Graph({
  // ...其他配置
  layout: {
    type: 'force', // 力導向佈局
    preventOverlap: true
  }
});

六、最佳實踐建議

ID命名規範 ：

// 好的示例
{ id: 'core_switch_01' }

// 不好的示例 ?
{ id: '節點1' } // 避免中文
{ id: ' ' }    // 不要用空格

動態更新數據 ：

// 在React組件中
const [graphData, setGraphData] = useState(initialData);

// 添加新節點
const addNode = () => {
  setGraphData(prev => ({
    nodes: [...prev.nodes, { id: 'newNode' }],
    edges: prev.edges
  }));
};

數據校驗工具 ：

// 驗證數據格式
const isValidData = (data) => {
  const nodeIds = new Set();
  for (const node of data.nodes) {
    if (!node.id || nodeIds.has(node.id)) return false;
    nodeIds.add(node.id);
  }
  // 檢查邊...
  return true;
};

本教程所有示例均通過以下環境驗證：

React 18.2.0
@antv/g6 4.8.6
Node.js 16.x

4.2 代碼解析

節點定義 ：
- 4個網絡設備節點：光貓、主路由器、兩台電腦
- 每個節點都有唯一id和中文標籤
邊連接 ：
- 光貓 → 主路由器（WAN連接）
- 主路由器 → 各電腦（LAN連接）
樣式配置 ：
- 默認節點：天藍色填充，藍色邊框
- 默認邊：淺藍色實線

4.3 運行效果描述

將看到4個藍色圓形節點，標籤清晰可見
節點之間用淺藍色線條連接
自動佈局排列成樹狀結構
支持畫布拖拽和縮放操作

五、常見問題排查

5.1 節點不顯示？

✅ 檢查項：

確認所有節點都有id字段
檢查id是否重複
確認容器元素已正確掛載

5.2 邊不顯示？

✅ 檢查項：

確認source和target的值正確
檢查引用的節點id確實存在
確認邊數據在edges數組中

5.3 佈局混亂？

✅ 解決方案：

顯式設置節點座標：

nodes: [
  { id: 'A', x: 100, y: 100 },
  { id: 'B', x: 300, y: 200 }
]

使用佈局算法：

const graph = new G6.Graph({
  // ...其他配置
  layout: {
    type: 'force', // 力導向佈局
    preventOverlap: true
  }
});

六、最佳實踐建議

ID命名規範 ：

// 好的示例
{ id: 'core_switch_01' }

// 不好的示例 ❌
{ id: '節點1' } // 避免中文
{ id: ' ' }    // 不要用空格

動態更新數據 ：

// 在React組件中
const [graphData, setGraphData] = useState(initialData);

// 添加新節點
const addNode = () => {
  setGraphData(prev => ({
    nodes: [...prev.nodes, { id: 'newNode' }],
    edges: prev.edges
  }));
};

數據校驗工具 ：

// 驗證數據格式
const isValidData = (data) => {
  const nodeIds = new Set();
  for (const node of data.nodes) {
    if (!node.id || nodeIds.has(node.id)) return false;
    nodeIds.add(node.id);
  }
  // 檢查邊...
  return true;
};

本教程所有示例均通過以下環境驗證：

React 18.2.0
@antv/g6 4.8.6
Node.js 16.x

銀之夏雪 Blog

@yinzhixiaxue

Tags

前端 (1158)

Javascript (735)

Css (108)

面試 (72)

瀏覽器 (43)

數據可視化 (31)

原型鏈 (28)

繼承 (21)

this (19)

原型 (15)

瀏覽器原理 (2)

Stories

AntV G6 基礎元素詳解（React版） - Stories Detail

一、初識 AntV G6

技術特點速覽：

二、節點（Nodes）完全指南

2.1 節點的核心屬性

█ 關鍵規則：

2.2 基礎節點示例

█ 在React中的使用示例：

三、邊（Edges）完全指南

3.1 邊的核心屬性

█ 關鍵規則：

3.2 基礎邊示例

2.3 邊的連接原理

█ 在React中的使用示例：

四、完整可運行示例

4.1 家庭網絡拓撲案例

一、初識 AntV G6

技術特點速覽：

二、節點（Nodes）完全指南

2.1 節點的核心屬性

█ 關鍵規則：

2.2 基礎節點示例

█ 在React中的使用示例：

三、邊（Edges）完全指南

3.1 邊的核心屬性

█ 關鍵規則：

3.2 基礎邊示例

2.3 邊的連接原理

█ 在React中的使用示例：

四、完整可運行示例

4.1 家庭網絡拓撲案例

4.2 代碼解析

4.3 運行效果描述

五、常見問題排查

5.1 節點不顯示？

5.2 邊不顯示？

5.3 佈局混亂？

六、最佳實踐建議

4.2 代碼解析

4.3 運行效果描述

五、常見問題排查

5.1 節點不顯示？

5.2 邊不顯示？

5.3 佈局混亂？

六、最佳實踐建議

Add a new Comments