G6

Bahasa Inggris | 简体中文

G6: Kerangka kerja visualisasi grafik di TypeScript

PENDAHULUAN • Contoh • Mulai Cepat • API

G6 adalah mesin visualisasi grafik. Ini memberikan kemampuan dasar untuk visualisasi grafik dan analisis seperti menggambar, tata letak, analisis, interaksi, animasi, tema, dan plugin. Dengan G6, pengguna dapat dengan cepat membangun aplikasi visualisasi dan analisis grafik mereka sendiri, membuat data relasional sederhana, transparan, dan bermakna.

Fitur

G6, sebagai mesin visualisasi grafik profesional, menawarkan fitur -fitur berikut:

• Elemen Kaya : Datang dengan berbagai elemen Node, Edge, dan Combo UI bawaan dengan konfigurasi gaya yang luas, mendukung panggilan balik data, dan memiliki mekanisme yang fleksibel untuk memperluas elemen khusus.
• Interaksi yang dapat dikendalikan : Ini mencakup lebih dari 10 perilaku interaksi bawaan dan menawarkan berbagai peristiwa yang kaya, memfasilitasi perluasan perilaku interaktif khusus.
• Tata Letak Kinerja Tinggi : Mesin ini memiliki lebih dari 10 tata letak grafik umum, beberapa di antaranya memanfaatkan GPU dan komputasi paralel karat untuk peningkatan kinerja, dan mendukung pengembangan tata letak khusus.
• Plugin yang nyaman : Fungsionalitas dan kinerja plugin bawaan yang dioptimalkan, dengan ekstensibilitas yang fleksibel, membuatnya lebih mudah untuk menerapkan kemampuan bisnis yang disesuaikan.
• Berbagai tema dan palet : Menyediakan dua set tema bawaan, terang dan gelap, yang mengintegrasikan lebih dari 20 palet warna komunitas populer berdasarkan skema warna baru ANTV.
• Rendering multi-lingkungan : Memanfaatkan kekuatan G, ini mendukung rendering di kanvas, SVG, dan WebGL, serta rendering sisi server dengan node.js; Ini juga menawarkan paket plugin yang menyediakan rendering 3D yang kuat dan interaksi spasial berdasarkan WebGL.
• React Ecosystem : Dengan memanfaatkan ekosistem react front-end, mendukung node bereaksi, secara signifikan memperkaya gaya presentasi node G6.

? Memulai

G6 biasanya diinstal melalui manajer paket seperti NPM atau benang.

$ npm install @antv/g6

Objek Graph kemudian dapat diimpor dari G6.

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

Semua berjalan dengan baik, Anda bisa mendapatkan grafik yang indah berikut!

? Ekosistem

• Bagan Desain Ant : Perpustakaan Bagan Reaksi Berdasarkan G2, G6, X6, L7.
• Graphin : Pembungkus bereaksi sederhana berdasarkan G6, serta SDK untuk mengembangkan aplikasi visualisasi grafik.

Untuk proyek open-source ekosistem lainnya, kontribusi dipersilakan. Silakan mengirimkan PR untuk dimasukkan.

? Berkontribusi

• Pelaporan Masalah : Jika Anda mengalami masalah apa pun dengan G6 selama penggunaan, jangan ragu untuk mengirimkan masalah, bersama dengan kode sampel minimal yang dapat mereproduksi masalah.
• Panduan Kontribusi : Informasi tentang cara terlibat dalam pengembangan dan kontribusi ke G6.
• Diskusi Ide : Diskusikan ide -ide Anda tentang diskusi GitHub atau di grup DingTalk.

? Lisensi

Mit.