G6下載G6源代碼下載

G6

其他源碼

5.0.33

下載

英語| 簡體中文

G6：打字稿中的圖形可視化框架

建立狀態

簡介•示例•快速啟動•API

G6是圖形可視化引擎。它為圖形可視化和分析提供了基本功能，例如繪圖，佈局，分析，交互，動畫，主題和插件。使用G6，用戶可以快速構建自己的圖形可視化和分析應用程序，從而使關係數據簡單，透明且有意義。

特徵

G6作為專業圖形可視化引擎，擁有以下功能：

豐富的元素：它具有各種具有廣泛樣式配置的內置節點，邊緣和組合UI元素，支持數據回調，並具有一種靈活的機制來擴展自定義元素。
可控的互動：它包括10多種內置交互行為，並提供了豐富的事件，從而促進了自定義交互行為的擴展。
高性能佈局：發動機具有10多個常見的圖形佈局，其中一些利用GPU和Rust Parallel Computing來提高性能，並且支持自定義佈局開發。
方便的插件：具有靈活的可擴展性，優化的內置插件功能和性能，使實現自定義業務功能變得更加容易。
多重主題和調色板：提供兩套內置主題，即淺色和深色，這些主題基於ANTV新配色方案整合了20多個流行的社區調色板。
多環境渲染：利用G的功率，它支持在畫布，SVG和WebGL中渲染，以及使用node.js的服務器端渲染；它還提供了基於WebGL的功能強大的3D渲染和空間交互的插件軟件包。
React生態系統：通過利用React前端生態系統，它支持反應節點，並顯著豐富G6節點的表現樣式。

？入門

G6通常通過軟件包管理器（例如NPM或紗線）安裝。

$ npm install @antv/g6

然後可以從G6導入Graph對象。

 < div id =" container " > </ div >

 import { Graph } from '@antv/g6' ;

// Get the Data.
const data = {
  nodes : [
    /* your nodes data */
  ] ,
  edges : [
    /* your edges data */
  ] ,
} ;

// Create the Graph instance.
const graph = new Graph ( {
  container : 'container' ,
  data ,
  node : {
    palette : {
      type : 'group' ,
      field : 'cluster' ,
    } ,
  } ,
  layout : {
    type : 'force' ,
  } ,
  behaviors : [ 'drag-canvas' , 'drag-node' ] ,
} ) ;

// Render the Graph.
graph . render ( ) ;