G6

Inglés | 简体中文

G6: un marco de visualización de gráficos en TypeScript

Introducción • Ejemplos • Inicio rápido • API

G6 es un motor de visualización de gráficos. Proporciona capacidades básicas para la visualización y análisis de gráficos, como el dibujo, el diseño, el análisis, la interacción, la animación, los temas y los complementos. Con G6, los usuarios pueden construir rápidamente sus propias aplicaciones de visualización y análisis de gráficos, haciendo que los datos relacionales sean simples, transparentes y significativos.

Características

G6, como motor de visualización de gráficos profesionales, cuenta con las siguientes características:

• Elementos ricos : viene con una variedad de elementos de interfaz de usuario de nodo, borde y combo incorporados con configuraciones de estilo extensas, admite devoluciones de llamada de datos y tiene un mecanismo flexible para extender elementos personalizados.
• Interacciones controlables : incluye más de 10 comportamientos de interacción incorporados y ofrece una rica gama de eventos, facilitando la expansión de comportamientos interactivos personalizados.
• Diseño de alto rendimiento : el motor presenta más de 10 diseños de gráficos comunes, algunos de los cuales aprovechan la computación paralela a GPU y Rust para un rendimiento mejorado, y admite el desarrollo de diseño personalizado.
• Complementos convenientes : funcionalidad y rendimiento optimizados de complementos incorporados, con extensibilidad flexible, lo que facilita la implementación de capacidades comerciales personalizadas.
• Tema y paletas múltiples : proporciona dos conjuntos de temas incorporados, Light and Dark, que integran más de 20 paletas de colores comunitarias populares basadas en el nuevo esquema de color ANTV.
• Representación multi-ambiente : aprovechando el poder de G, admite la representación en lienzo, SVG y WebGL, así como la representación del lado del servidor con Node.js; También ofrece paquetes de complementos que proporcionan potentes representación 3D e interacciones espaciales basadas en WebGL.
• Ecosistema React : al utilizar el ecosistema de front-end React, admite nodos React, enriqueciendo significativamente los estilos de presentación de los nodos G6.

? Empezando

G6 generalmente se instala a través de un administrador de paquetes como NPM o hilo.

$ npm install @antv/g6

El objeto Graph se puede importar 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 ( ) ;

Todo va bien, ¡puedes obtener el siguiente gráfico encantador!

? Ecosistema

• Gráficos de diseño de hormigas : una biblioteca de gráficos React basada en G2, G6, X6, L7.
• Graphin : un envoltorio React simple basado en G6, así como un SDK para desarrollar aplicaciones de visualización de gráficos.

Para más proyectos de código abierto del ecosistema, las contribuciones son bienvenidas. No dude en enviar un PR para su inclusión.

? Que contribuye

• Informe de problemas : si encuentra algún problema con G6 durante el uso, no dude en enviar un problema, junto con el código de muestra mínimo que puede reproducir el problema.
• Guía de contribución : información sobre cómo involucrarse en el desarrollo y la contribución a G6.
• Discusión de ideas : discuta sus ideas sobre las discusiones de Github o en el grupo Dingtalk.

? Licencia

Mit.