Английский | Китайский язык (упрощённый)

G6: Фреймворк визуализации графиков на TypeScript

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

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

✨ Возможности

G6 как профессиональный движок визуализации графиков обладает следующими возможностями:- Разнообразные Элементы: Включает множество встроенных элементов нод, ребер и Combo UI с широкими возможностями конфигурации стилей, поддерживает обратные вызовы данных и гибкий механизм расширения пользовательских элементов.

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

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

$ npm install @antv/g6

Объект Graph затем можно импортировать из G6.

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

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

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

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

// Отрисовываем граф.
graph.render();

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

🌍 Экосистема

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

Для получения информации о других открытых проектах экосистемы приветствуем ваши вклады. Пожалуйста, отправьте Pull Request для включения.

📮 Вклад- Сообщение об ошибке: Если вы столкнулись с проблемами при использовании G6, пожалуйста, сообщите об этом, предоставив минимальный пример кода, который воспроизводит проблему.

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

  📄 Лicensia

  MIT.