AntV G6 Graphавтор antvis

AntV G6 Graph Skill.

Создавайте интерактивные представления существующих сетей и иерархий на основе данных об узлах и рёбрах.

Визуализация графов
Сети
AntV

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · AntV G6 GraphSKILL.md

Задача Визуализация графов Результат • Представление графа G6 JavaScript, настроенное для предоставленного набора данных о связях • Выбор раскладки и визуального кодирования для узлов, рёбер и групп • Явно заданные способы исследования, такие как масштабирование, перетаскивание или выбор Перед началом Приложение на @antv/g6 v5, контейнер графа в браузере и доступ к сети, если нужен описанный сервис получения справочных материалов. Проверяйте API по установленному релизу.

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

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

AntV G6 Graph: исследуйте связанные данные

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

Рабочий процесс на основе источникаНе тест выполнения

Принцип работы

AntV G6 Graph посвящён визуализации связанных данных: сетей, деревьев, иерархий, ментальных карт и других структур из узлов и рёбер. Описанный навык ориентирован на G6 v5 и организует граф через декларативную конфигурацию данных, раскладки, внешнего вида, поведений и плагинов. Главный вопрос: как показать структуру связей и дать возможность её исследовать.

Запись сочетает конкретные предупреждения о миграции на v5 с удалённым сервисом получения справочных материалов по специальным темам. Она отличает G6 от статистических диаграмм G2 и редакторов диаграмм X6. Картинка из узлов и рёбер может напоминать холст редактора, но показ существующей сети отличается от задачи, где пользователи сами строят и сохраняют рабочий процесс.

Ожидаемые результаты

Представление графа G6 JavaScript, настроенное для предоставленного набора данных о связях
Выбор раскладки и визуального кодирования для узлов, рёбер и групп
Явно заданные способы исследования, такие как масштабирование, перетаскивание или выбор

Смотреть пример задания

От задания до проверки

01
Проверьте данные о связях
Присвойте каждому узлу уникальный ID и убедитесь, что концы рёбер указывают на нужные узлы. Отделите подписи и визуальные атрибуты от самой связи.
02
Выберите представление
Подберите для структуры силовую, древовидную, иерархическую, радиальную или другую подходящую раскладку. Если детали конфигурации выходят за рамки основного файла, получите нужный справочный материал по G6.
03
Настройте G6 v5
Используйте описанные соглашения о данных, стилях, поведениях и отрисовке для целевого релиза, а не смешивайте их с конфигурацией v4, которую вы помните.
04
Проверьте граф
Проверьте в реальной браузерной среде отрисованные подписи, связи на концах рёбер, читаемость раскладки и нужные взаимодействия. Просматривайте плотные или несвязные участки, а не только аккуратный образец.

02 Когда использовать

Когда использовать

Приложение на @antv/g6 v5, контейнер графа в браузере и доступ к сети, если нужен описанный сервис получения справочных материалов. Проверяйте API по установленному релизу.

Хорошо подходит

Исследование связейПолезно для показа сущностей и их связей, когда сама структура сети является предметом интерфейса.
Деревья и иерархииИсточник направляет запросы по деревьям, ментальным картам, диаграммам «рыбья кость» и иерархиям к специализированным рекомендациям по раскладкам.
Миграция G6Явно описанные отличия в данных, подписях, поведениях и параметрах раскладки важны при проверке старого кода G6.

Ограничения

Не рабочий процесс редактора диаграммВыбирайте рекомендации по редактору X6, если главная задача — создавать связанные узлы, порты и редактируемое состояние диаграммы.
Не статистические диаграммыЭтот навык явно исключает диаграммы G2 и сводные таблицы S2; раскладка графа не заменяет кодирование данных в количественных диаграммах.
Проверка версии и среды выполненияИсточник ориентирован на v5. Его ограничения и примеры — справочный материал, а не доказательство того, что конкретный проект или более старый релиз протестированы.

Что подготовить

Сущности и связиПредоставьте идентификаторы узлов, концы рёбер, подписи и все значимые групповые отношения.
Задача исследованияОбъясните, нужно ли читателям изучать сеть, следовать по иерархии, выделять группы или рассматривать отдельные связи.
Ограничения проектаУкажите установленный релиз G6, контейнер графа, ожидаемый объём данных и необходимые браузерные взаимодействия.

03 Важные решения

Важные решения

Сначала данные, потом раскладка
Визуально правдоподобная сеть может быть неверной, если идентификаторы или концы рёбер несогласованны. Явный контракт данных позволяет проверить такие ошибки.
Детали миграции видны
Размещение подписей и настройка поведений изменились между поколениями API; источник указывает на эти различия, а не считает все примеры G6 взаимозаменяемыми.
Целевое получение справочных материалов
Запись сопоставляет задачу, например сворачивание и разворачивание или стилизацию узлов, с целевым запросом к справочнику, а не требует учитывать все возможности графа сразу.

04 Пример задания

Попробуйте целевое задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Проверьте настройку

Получите каталог навыка antv-g6-graph из репозитория и отдельно настройте среду выполнения G6 для своего проекта. Пример с CDN в записи относится к загрузке среды выполнения и не является проверенной командой установки навыка.

Исходный файл в репозитории

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g6-graph/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используйте antv-g6-graph, чтобы построить представление сети зависимостей только для чтения из предоставленных узлов и рёбер. Проверьте все концы рёбер, определите установленную у нас версию G6 и объясните выбор раскладки. Добавьте только те поведения масштабирования, перетаскивания и выбора, которые нужны для изучения зависимостей. Сверяйтесь со справочниками по v5, а не копируйте параметры v4, и сообщайте о проверках в среде выполнения отдельно от непроверенных допущений.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

Каждое отрисованное ребро соответствует допустимым концам во входных данных.
Раскладка и подписи делают реальную структуру связей читаемой.
Настроенные поведения работают в установленной среде выполнения G6 без неподдерживаемых устаревших параметров.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Наличие в списке не означает, что навык включён в поставку или что его внешние инструменты, учётные данные и программные зависимости входят в комплект.

Скачать OpenDesign Прочитать краткое руководство

05 Источник и лицензия

Источник и лицензия

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

Владелец источника: antvis
Репозиторий: antvis/chart-visualization-skills
Файл навыка: skills/antv-g6-graph/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · a105fa12a9fa

Редакционное резюме источника

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

Авторское резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не число использований навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Чем это отличается от G2?

Здесь G6 используется для связанных сущностей и раскладок графов. Источник явно исключает сценарии статистических диаграмм G2.

Стоит ли использовать его для создания редактируемого холста рабочего процесса?

Если главные требования — создание узлов, порты соединений, плагины редактора и сохраняемое состояние диаграммы, источник относит эту задачу к X6.

Содержит ли навык все справочные материалы G6 API?

Нет. В нём есть ключевые шаблоны и сервис получения материалов для более подробной документации по раскладкам, стилям, событиям, поведениям и плагинам.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Скачать OpenDesign Обзор дизайн-навыков