G6

Английский | 简体中文

G6: структура визуализации графика в TypeScript

Введение • Примеры • Быстрый старт • API

G6 - это механизм визуализации графика. Он предоставляет основные возможности для визуализации и анализа графиков, таких как рисунок, макет, анализ, взаимодействие, анимация, темы и плагины. С G6 пользователи могут быстро создавать свои собственные приложения для визуализации и анализа графиков, делая реляционные данные простыми, прозрачными и значимыми.

Функции

G6, как профессиональный двигатель визуализации графика, может похвастаться следующими функциями:

• Богатые элементы : он поставляется с различными встроенными элементами узла, края и комбо-пользовательского интерфейса с обширными конфигурациями стиля, поддерживает обратные вызовы данных и имеет гибкий механизм для расширения пользовательских элементов.
• Контролируемые взаимодействия : он включает в себя более 10 встроенных поведений взаимодействия и предлагает богатый набор событий, способствуя расширению пользовательского интерактивного поведения.
• Высокопроизводительный макет : двигатель имеет более 10 общих макетов графиков, некоторые из которых используют параллельные вычисления GPU и ржавчины для повышения производительности, и он поддерживает разработку пользовательских макетов.
• Удобные плагины : оптимизированная встроенная функциональность и производительность плагина, с гибкой расширяемостью, что облегчает реализацию индивидуальных бизнес-возможностей.
• Многочисленные темы и палитры : предоставляет два набора встроенных тем, световые и темные, которые интегрируют более 20 популярных цветовых палитров сообщества на основе новой цветовой гаммы ANTV.
• Рендеринг с несколькими средами : использует мощность G, он поддерживает рендеринг в Canvas, SVG и WebGL, а также рендеринг на стороне сервера с node.js; Он также предлагает пакеты плагина, которые обеспечивают мощное 3D -рендеринг и пространственное взаимодействие на основе WebGL.
• React Ecosystem : Используя фронтальную экосистему React, она поддерживает реакционные узлы, значительно обогащая стили презентационных узлов узлов G6.

? Начиная

G6 обычно устанавливается через диспетчер пакетов, такой как NPM или пряжа.

$ npm install @antv/g6

Затем объект Graph может быть импортирован из 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 ( ) ;

Все идет хорошо, вы можете получить следующий прекрасный график!

? Экосистема

• Графики дизайна муравья : библиотека реагирования, основанная на G2, G6, X6, L7.
• Графин : простая обертка React, основанная на G6, а также SDK для разработки приложений для визуализации графика.

Для более экосистемы проектов с открытым исходным кодом взносы приветствуются. Пожалуйста, не стесняйтесь отправлять пиар для включения.

? Внося

• Отчеты о выпуске : Если вы сталкиваетесь с какими -либо проблемами с G6 во время использования, пожалуйста, не стесняйтесь отправлять проблему, а также минимальный код выборки, который может воспроизводить проблему.
• Руководство по взносу : информация о том, как принять участие в разработке и вкладе в G6.
• Обсуждение идей : Обсудите свои идеи о дискуссиях GitHub или в группе Dingtalk.

? Лицензия

Грань