G6

Englisch | 简体中文

G6: Ein Graph Visualisierungsframework in TypeScript

Einführung • Beispiele • Schneller Start • API

G6 ist eine Grafikvisualisierungsmotor. Es bietet grundlegende Funktionen für die Grafikvisualisierung und -analyse wie Zeichnen, Layout, Analyse, Interaktion, Animation, Themen und Plugins. Mit G6 können Benutzer schnell ihre eigenen Grafikvisualisierungs- und Analyseanwendungen erstellen, wodurch relationale Daten einfach, transparent und aussagekräftig werden.

Merkmale

G6 als professionelle Graph Visualisierungsmotor bietet die folgenden Funktionen:

• Reiche Elemente : Es verfügt über eine Vielzahl von integrierten Knoten-, Kanten- und Combo-UI-Elementen mit umfangreichen Stilkonfigurationen, unterstützt Daten-Rückrufe und verfügt über einen flexiblen Mechanismus für die Erweiterung benutzerdefinierter Elemente.
• Steuerbare Interaktionen : Es umfasst mehr als 10 eingebaute Interaktionsverhalten und bietet eine große Auswahl an Veranstaltungen, wodurch die Erweiterung kundenspezifischer interaktiver Verhaltensweisen erleichtert wird.
• Hochleistungs-Layout : Die Engine verfügt über mehr als 10 gemeinsame Grafiklayouts, von denen einige GPU- und Rost-Parallel-Computing für eine verbesserte Leistung nutzen, und unterstützt die kundenspezifische Layoutentwicklung.
• Bequeme Plugins : Optimierte integrierte Plugin-Funktionen und -leistung mit flexibler Erweiterbarkeit und erleichtern die Implementierung kundenspezifischer Geschäftsfunktionen.
• Mehrfaches Thema und Paletten : Bietet zwei Sätze integrierter Themen, hell und dunkel, die über 20 beliebte Farbpaletten in der Gemeinschaft basierend auf dem AntV-neuen Farbschema integrieren.
• Multi-Umwelt-Rendering : Nutzung der Kraft von G und unterstützt das Rendern von Leinwand, SVG und WebGL sowie das serverseitige Rendering mit Node.js; Es bietet auch Plugin -Pakete, die leistungsstarke 3D -Rendering- und räumliche Interaktionen basierend auf WebGL bieten.
• React-Ökosystem : Durch die Verwendung des React Front-End-Ökosystems unterstützt es React-Knoten und bereichert die Präsentationsstile von G6-Knoten signifikant.

? Erste Schritte

G6 wird normalerweise über einen Paketmanager wie NPM oder Garn installiert.

$ npm install @antv/g6

Das Graph kann dann aus G6 importiert werden.

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

Alles geht gut, Sie können das folgende schöne Diagramm bekommen!

? Ökosystem

• Ant -Design -Diagramme : Eine React -Diagrammbibliothek basierend auf G2, G6, X6, L7.
• Graphin : Ein einfacher React -Wrapper basierend auf G6 sowie ein SDK für die Entwicklung von Graphenvisualisierungsanwendungen.

Für weitere Open-Source-Projekte für Ökosysteme sind Beiträge willkommen. Bitte zögern Sie nicht, eine PR für die Aufnahme einzureichen.

? Beitragen

• Ausgabeberichterstattung : Wenn Sie beim Gebrauch Probleme mit G6 begegnen, können Sie eine Ausgabe zusammen mit dem minimalen Beispielcode einreichen, der das Problem reproduzieren kann.
• Beitragsleitfaden : Informationen, wie Sie sich in die Entwicklung und den Beitrag zu G6 einsetzen können.
• Ideendiskussion : Besprechen Sie Ihre Ideen zu Github -Diskussionen oder in der Dingtalk -Gruppe.

? Lizenz

MIT.