AntV - G6關(guān)系數(shù)據(jù)可視化框架

G6 是一個圖可視化引擎。它提供了圖的繪制、布局、分析、交互、動畫等圖可視化的基礎(chǔ)能力。旨在讓關(guān)系變得透明，簡單。讓用戶獲得關(guān)系數(shù)據(jù)的 Insight。

基于 G6，用戶可以快速搭建自己的 圖分析 或 圖編輯 應(yīng)用。

如果你還沒有使用過 G6， 建議通過快速上手先體驗一下 G6 的魅力。

G6 的特性

G6 作為一款專業(yè)的圖可視化引擎，具有以下特性：

• 豐富的元素：內(nèi)置豐富的節(jié)點與邊元素，自由配置，支持自定義；
• 可控的交互：內(nèi)置 10+ 交互行為，支持自定義交互；
• 強大的布局：內(nèi)置了 10+ 常用的圖布局，支持自定義布局；
• 便捷的組件：優(yōu)化內(nèi)置組件功能及性能；
• 友好的體驗：根據(jù)用戶需求分層梳理文檔，支持 TypeScript 類型推斷。

除了默認(rèn)好用、配置自由的內(nèi)置功能，元素、交互、布局均具有高可擴(kuò)展的自定義機制。

豐富的圖元素

強大的布局及動畫

G6 文檔

• G6 入門教程
• G6 核心概念
• G6 高級指引
• API

快速上手

// 定義數(shù)據(jù)源
const data = {
  // 點集
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 200,
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  // 邊集
  edges: [
    // 表示一條從 node1 節(jié)點連接到 node2 節(jié)點的邊
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

// 創(chuàng)建 G6 圖實例
const graph = new G6.Graph({
  container: 'mountNode', // 指定圖畫布的容器 id
  // 畫布寬高
  width: 800,
  height: 500,
});
// 讀取數(shù)據(jù)
graph.data(data);
// 渲染圖
graph.render();

更詳細(xì)的內(nèi)容請參考快速上手文檔。

友情鏈接

結(jié)合前端庫的第三方實現(xiàn)：

• 基于 G6 和 React 的可視化流程編輯器 - Workflow Designer；
• 基于 G6 和 Vue 的可視化編輯器；
• 基于 G6 和 Vue 的可視化圖形編輯器 - A visual graph editor based on G6 and Vue。