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

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

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

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

✨ Функции

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

• Визуализация графов: G6 позволяет создавать и отображать сложные графы, включая графы с большим количеством вершин и ребер.
• Интерактивность: Пользователи могут взаимодействовать с графами, используя различные инструменты для навигации и манипуляции.
• Настройка внешнего вида: Возможность настроить внешний вид графов, включая цвета, шрифты и другие параметры.
• Поддержка различных типов графов: G6 поддерживает различные типы графов, включая ориентированные и неориентированные графы, а также графы с весами.
• Интеграция с другими системами: Возможность интеграции G6 с другими системами и инструментами для анализа данных.
• Поддержка различных платформ: G6 может использоваться на различных платформах, включая веб-браузеры и мобильные устройства.
• Расширенные возможности: Включает расширенные возможности, такие как поддержка событий, анимации и другие функции для улучшения пользовательского опыта.- Разнообразные элементы: Включает множество встроенных элементов узлов, ребер и Combo UI с обширными возможностями стилизации, поддерживает обратные вызовы данных и предлагает гибкий механизм для расширения пользовательских элементов.
• Управляемые взаимодействия: Включает более 10 встроенных поведений взаимодействия и предлагает богатый набор событий, что облегчает расширение пользовательских поведений взаимодействия.
• Высокопроизводительное расположение графов: Включает более 10 общих расположений графов, некоторые из которых используют GPU и параллельное вычисление на Rust для улучшения производительности, и поддерживает разработку пользовательских расположений.
• Конфигурируемые плагины: Оптимизированная встроенная функциональность и производительность плагинов, с гибким расширением, что облегчает реализацию пользовательских бизнес-возможностей.
• Множество тем и палитр: Предоставляет два набора встроенных тем, светлую и темную, которые интегрируют более 20 популярных цветовых палитр сообщества на основе новой цветовой схемы AntV.
• Множественное окружение рендеринга: Используя мощь G, поддерживает рендеринг в Canvas, SVG и WebGL, а также серверное рендеринг с Node.js; также предлагает пакеты плагинов, которые предоставляют мощные возможности 3D-рендеринга и пространственных взаимодействий на основе 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: [
    /* ваши данные ребер */
  ],
};

// Создайте экземпляр Graph. 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: Простая обертка React на основе G6, а также SDK для разработки приложений визуализации графов.

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

📮 Вклад

Этот проект существует благодаря всем, кто вносит вклад.

И спасибо всем нашим спонсорам! 🙏

📄 Лицензия

MIT.