English | русский язык

G6: Графический движок для визуального анализа данных

Обзор • Примеры графиков • Быстрый старт • API

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

✨ Основные характеристики

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

• Высокая производительность: G6 оптимизирован для работы с большими данными и сложными графическими моделями, обеспечивая быстрый отклик и плавное представление данных.
• Гибкая настройка: Поддерживает различные типы графических элементов и позволяет пользователям легко настраивать внешний вид и поведение графиков.
• Расширяемость: Предоставляет API для расширения функциональности, позволяя создавать новые компоненты и интегрировать сторонние библиотеки.
• Кросс-платформенность: Совместим с различными платформами и языками программирования, что делает его удобным для использования в различных проектах.
• Большой набор примеров: Включает множество примеров и руководства, чтобы помочь новичкам быстро освоить использование G6.- Разнообразные элементы: Включает множество встроенных узлов, ребер, Combo UI элементов с богатыми возможностями стилизации, поддерживает обратные вызовы данных и предлагает гибкий механизм расширения пользовательских элементов.
• Управляемое взаимодействие: Предоставляет более десяти встроенных поведений взаимодействия и широкий спектр событий, что позволяет легко расширять и создавать пользовательские действия.
• Высокопроизводительные макеты: Обеспечивает более десяти популярных макетов графиков, некоторые из которых используют GPU и параллельное программирование на Rust для повышения производительности, а также поддерживают пользовательские макеты.
• Простые компоненты: Улучшены встроенные компоненты по функциональности и производительности, предлагается гибкость для расширения, чтобы обеспечить реализацию специфических требований бизнеса.
• Множество тем цветов: Представлены светлая и темная темы, а также более двадцати часто используемых цветовых палитр сообщества на основе новой цветовой палитры AntV.
• Многооконное окружение отрисовки: Использует возможности G, поддерживает Canvas, SVG и WebGL, а также серверную отрисовку на Node.js; предоставляет мощные плагины для трёхмерной отрисовки и пространственного взаимодействия на базе WebGL.- Система React: Использует экосистему React для фронтенд-разработки, поддерживает React-узлы, значительно увеличивая вариативность стилей узлов.## 🔨 Начало работы

Инсталляция может быть выполнена через менеджеры пакетов, такие как NPM или Yarn.

$ npm install @antv/g6

После успешной установки можно импортировать объект Graph.

<div id="container"></div>

import { Graph } from '@antv/g6';

// Подготовка данных
const data = {
  nodes: [
    // ваши данные узлов
  ],
  edges: [
    // ваши данные ребер
  ],
};

// Инициализация экземпляра графика
const graph = new Graph({
  container: 'container',
  data,
  node: {
    palette: {
      type: 'group',
      field: 'cluster',
    },
  },
  layout: {
    type: 'force',
  },
  behaviors: ['drag-canvas', 'drag-node'],
});

// Отображение графика
graph.render();

Если все прошло успешно, вы получите силовое поле графика ниже!

🌍 Экосистема

• Ant Design Charts: Библиотека графиков для React, основанная на G2, G6, X6, L7.
• Graphin: Простое обертывание G6 для React и SDK для разработки приложений визуализации графов.

Дополнительные открытые проекты экосистемы приветствуются через Pull Request.

📮 Вклад

• Отчеты об ошибках: При возникновении проблем с использованием G6, пожалуйста, создайте Issue и приложите минимальный пример кода для воспроизведения проблемы.
• Руководство по вкладу: Как участвовать в разработке и вкладе G6.
• Обсуждение идей: Обсуждение идей на GitHub Discussions или в группе DingTalk.

MIT.