G6

Anglais | 简体中文

G6: un cadre de visualisation du graphique dans TypeScript

Introduction • Exemples • Démarrage rapide • API

G6 est un moteur de visualisation graphique. Il fournit des capacités de base pour la visualisation et l'analyse des graphiques telles que le dessin, la mise en page, l'analyse, l'interaction, l'animation, les thèmes et les plugins. Avec G6, les utilisateurs peuvent rapidement créer leurs propres applications de visualisation et d'analyse du graphique, en rendant les données relationnelles simples, transparentes et significatives.

Caractéristiques

G6, en tant que moteur de visualisation de graphe professionnel, possède les caractéristiques suivantes:

• Éléments riches : il est livré avec une variété d'éléments de nœud, de bord et de combo intégrés intégrés avec des configurations de style étendues, prend en charge les rappels de données et a un mécanisme flexible pour étendre les éléments personnalisés.
• Interactions contrôlables : il comprend plus de 10 comportements d'interaction intégrés et offre une riche gamme d'événements, facilitant l'expansion des comportements interactifs personnalisés.
• Disposition haute performance : le moteur dispose de plus de 10 dispositions de graphiques courantes, dont certains tirent parti de l'informatique parallèle GPU et Rust pour des performances améliorées, et il prend en charge le développement de disposition personnalisé.
• Plugins pratiques : fonctionnalité et performances des plugins intégrés optimisés, avec une extensibilité flexible, ce qui facilite la mise en œuvre des capacités commerciales personnalisées.
• Thème et palettes multiples : fournit deux ensembles de thèmes intégrés, clairs et sombres, qui intègrent plus de 20 palettes de couleurs communautaires populaires basées sur la nouvelle palette de couleurs ANTV.
• Rendu multi-environnement : exploitant la puissance de G, il prend en charge le rendu dans Canvas, SVG et WebGL, ainsi que le rendu côté serveur avec Node.js; Il propose également des packages de plugin qui offrent un rendu 3D puissant et des interactions spatiales basées sur WebGL.
• Écosystème de réaction : En utilisant l'écosystème frontal React, il prend en charge les nœuds React, enrichissant considérablement les styles de présentation des nœuds G6.

? Commencer

G6 est généralement installé via un gestionnaire de packages tel que NPM ou YARN.

$ npm install @antv/g6

L'objet Graph peut alors être importé de 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 ( ) ;

Tout se passe bien, vous pouvez obtenir le joli graphique suivant!

? Écosystème

• Tableaux de conception des fourmis : une bibliothèque de graphiques de réact basée sur G2, G6, X6, L7.
• Graphin : un simple wrapper réactif basé sur G6, ainsi qu'un SDK pour développer des applications de visualisation de graphiques.

Pour plus de projets open-source écosystèmes, les contributions sont les bienvenues. N'hésitez pas à soumettre un RP pour inclusion.

? Contributif

• Rapports de problèmes : Si vous rencontrez des problèmes avec G6 pendant l'utilisation, n'hésitez pas à soumettre un problème, ainsi que l'exemple de code minimal qui peut reproduire le problème.
• Guide de contribution : informations sur la façon de s'impliquer dans le développement et la contribution au G6.
• Discussion des idées : Discutez de vos idées sur les discussions GitHub ou dans le groupe Dingtalk.

? Licence

Mit.