動態

詳情 返回 返回

AntV G6 基礎元素詳解（React版） - 動態 詳情

一、初識 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;// 邊框粗細
  };
  // 其他自定義屬性...
}

█ 關鍵規則：

  1. id 是必須且唯一 的，就像每個人的身份證號
  2. 如果多個節點使用相同id，會導致渲染異常
  3. 未設置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[];// 虛線樣式
  };
}

█ 關鍵規則：

  1. source和target必須指向已存在的節點id
  2. 如果引用了不存在的節點id，邊將不會顯示
  3. 邊的方向由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

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;// 邊框粗細
  };
  // 其他自定義屬性...
}

█ 關鍵規則：

  1. id?是必須且唯一 的，就像每個人的身份證號
  2. 如果多個節點使用相同id，會導致渲染異常
  3. 未設置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[];// 虛線樣式
  };
}

█ 關鍵規則：

  1. source和target必須指向已存在的節點id
  2. 如果引用了不存在的節點id，邊將不會顯示
  3. 邊的方向由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 代碼解析

  1. 節點定義 ：

    • 4個網絡設備節點：光貓、主路由器、兩台電腦
    • 每個節點都有唯一id和中文標籤

  2. 邊連接 ：

    • 光貓 → 主路由器（WAN連接）
    • 主路由器 → 各電腦（LAN連接）

  3. 樣式配置 ：

    • 默認節點：天藍色填充，藍色邊框
    • 默認邊：淺藍色實線

4.3 運行效果描述

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

五、常見問題排查

5.1 節點不顯示？

? 檢查項：

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

5.2 邊不顯示？

? 檢查項：

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

5.3 佈局混亂？

? 解決方案：

  1. 顯式設置節點座標：
nodes: [
  { id: 'A', x: 100, y: 100 },
  { id: 'B', x: 300, y: 200 }
]
  1. 使用佈局算法：
const graph = new G6.Graph({
  // ...其他配置
  layout: {
    type: 'force', // 力導向佈局
    preventOverlap: true
  }
});

六、最佳實踐建議

  1. ID命名規範 ：

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

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

  2. 動態更新數據 ：

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

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

  3. 數據校驗工具 ：

    // 驗證數據格式
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 代碼解析

  1. 節點定義 ：

    • 4個網絡設備節點：光貓、主路由器、兩台電腦
    • 每個節點都有唯一id和中文標籤

  2. 邊連接 ：

    • 光貓 → 主路由器（WAN連接）
    • 主路由器 → 各電腦（LAN連接）

  3. 樣式配置 ：

    • 默認節點：天藍色填充，藍色邊框
    • 默認邊：淺藍色實線

4.3 運行效果描述

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

五、常見問題排查

5.1 節點不顯示？

✅ 檢查項：

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

5.2 邊不顯示？

✅ 檢查項：

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

5.3 佈局混亂？

✅ 解決方案：

  1. 顯式設置節點座標：
nodes: [
  { id: 'A', x: 100, y: 100 },
  { id: 'B', x: 300, y: 200 }
]
  1. 使用佈局算法：
const graph = new G6.Graph({
  // ...其他配置
  layout: {
    type: 'force', // 力導向佈局
    preventOverlap: true
  }
});

六、最佳實踐建議

  1. ID命名規範 ：

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

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

  2. 動態更新數據 ：

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

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

  3. 數據校驗工具 ：

    // 驗證數據格式
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
數據可視化 , 前端 , Javascript
user avatar tianmiaogongzuoshi_5ca47d59bef41 頭像 dingtongya 頭像 grewer 頭像 cyzf 頭像 linlinma 頭像 zourongle 頭像 huajianketang 頭像 banana_god 頭像 u_17443142 頭像 xiaoxxuejishu 頭像 shuirong1997 頭像 dunizb 頭像
點贊 141 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.