G6

Inglês | 简体中文

G6: Uma estrutura de visualização de gráficos no TypeScript

Introdução • Exemplos • Iniciar rápido • API

G6 é um mecanismo de visualização de gráficos. Ele fornece recursos básicos para visualização e análise de gráficos, como desenho, layout, análise, interação, animação, temas e plugins. Com o G6, os usuários podem criar rapidamente seus próprios aplicativos de visualização e análise de gráficos, tornando os dados relacionais simples, transparentes e significativos.

Características

G6, como um mecanismo de visualização de gráficos profissionais, possui os seguintes recursos:

• Elementos ricos : ele vem com uma variedade de elementos internos de nó, borda e interface do usuário com configurações extensas de estilo, suporta retornos de chamada de dados e possui um mecanismo flexível para estender elementos personalizados.
• Interações controláveis : inclui mais de 10 comportamentos de interação internos e oferece uma rica variedade de eventos, facilitando a expansão de comportamentos interativos personalizados.
• Layout de alto desempenho : o motor possui mais de 10 layouts de gráficos comuns, alguns dos quais alavancam a GPU e a computação paralela a ferrugem para um desempenho aprimorado, e suporta o desenvolvimento de layout personalizado.
• Plugins convenientes : funcionalidade e desempenho otimizados do plug-in integrado, com extensibilidade flexível, facilitando a implementação de recursos de negócios personalizados.
• Múltiplos temas e paletas : fornece dois conjuntos de temas embutidos, claros e escuros, que integram mais de 20 paletas de cores comunitárias populares com base no novo esquema de cores ANTV.
• Renderização com vários ambientes : aproveitando o poder de G, ele suporta renderização em tela, SVG e webgl, bem como renderização do lado do servidor com node.js; Ele também oferece pacotes de plug -in que fornecem poderosas interações 3D e interações espaciais com base no WebGL.
• ECOSYSTEME DE REACT : Utilizando o ecossistema React front-end, ele suporta nós do React, enriquecendo significativamente os estilos de apresentação dos nós G6.

? Começando

G6 é geralmente instalado por meio de um gerenciador de pacotes, como NPM ou YARN.

$ npm install @antv/g6

O objeto Graph pode ser importado do 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 ( ) ;

Tudo corre bem, você pode obter o seguinte gráfico adorável!

? Ecossistema

• Gráficos de design de formigas : uma biblioteca de gráficos do React baseada em G2, G6, X6, L7.
• Graphin : um invólucro simples do React baseado no G6, bem como em um SDK para desenvolver aplicativos de visualização de gráficos.

Para mais projetos de código aberto do ecossistema, as contribuições são bem-vindas. Sinta -se à vontade para enviar um PR para inclusão.

? Contribuindo

• Relatórios de problemas : Se você encontrar algum problema com o G6 durante o uso, sinta -se à vontade para enviar um problema, juntamente com o código de amostra mínimo que pode reproduzir o problema.
• Guia de contribuição : informações sobre como se envolver no desenvolvimento e contribuição para o G6.
• Idéias Discussão : Discuta suas idéias sobre discussões no Github ou no grupo DingTalk.

? Licença

Mit.