X6 — это механизм редактирования графиков Ant Financial AntV. Пиктограмма X редактирует связь сцены. В то же время X6 является братом-близнецом G6, поэтому используется 6 в G6. Давайте посмотрим поближе.Шесть степеней теории разделения, выражая наше благоговение и восхищение реляционными данными и реляционными сетями.
X6 родился из фактического бизнес-сценария Ant.На этой основе мы улучшили общие расширения сценариев редактирования графов, такие как миникарта, система сетки, линии выравнивания, выбор кадра, повтор/отмена и т. д., а также встроенные в подпрограммах для сценариев редактирования графов.Взаимодействия и дизайн, такие как группировка, заглушки ссылок, масштабирование узлов, вращение, взаимодействие проводов, а также предоставляет недорогие возможности настраиваемых узлов на основе HTML и React.
Предварительный просмотр функции
Начать быстро
Вам нужно только освоить API создания холста, добавления узлов/ребер, обновления узлов/ребер и удаления узлов/ребер, чтобы начать использовать X6, и мы извлекли все функции X6 в элементы конфигурации холста, системы файл конфигурации по умолчаниюpreset.tsСодержит более 50 элементов конфигурации и более 300 строк кода конфигурации, вы можете быстро настроить свой собственный холст на основе возможностей конфигурации X6.
Узлы, соединения и холсты, основные возможности редактирования графов
Легко настроить узлы
В X6 предварительно заданы некоторые общие стили узлов.shapeЧтобы указать, какая графика используется для визуализации узлов, их можно использовать напрямую, а большинство стилей и взаимодействий узлов можно настроить.
Однако узлы в реальном бизнес-сценарии могут быть более сложными, а предустановленные стили не соответствуют требованиям? Неважно, мы также предоставляем два гибких способа настройки узлов. своего родаИспользуйте HTMLElement или фрагменты HTML для определения узлов(когда используешьshapeНазначен какhtml); другой также можетИспользуйте компоненты React для рендеринга узлов(Зарегистрируйтесь в X6 Register Node API@antv/x6-react-shapeС нашим antd это естественная пара).
Богатые стили линий и стрелок
Встроенная линия, кривая, линия перегиба, ортогональная линия, линия отношения, линия петли и другие распространенные стили соединения и более 10 стилей стрелок.
Сеточная система с бесконечным холстом
Сетка — это наименьшая единица пикселей, когда узел расположен на холсте, например, когда положение узла{x: 12, y: 18}Размер сетки5, то фактическая позиция, в которой узел отображается на холсте, будет{x:10, y: 20}. X6 предоставляет по умолчаниюlineа такжеdotДва стиля сетки и поддержка пользовательского размера и цвета сетки.
Будуinfiniteпараметры установлены наtrueОткройте бесконечный холст, когда узел / край краев холста для перемещения холста автоматически увеличивает размер холста.
Возможности взаимодействия и вспомогательные компоненты необходимы для редактирования диаграмм.
Заглушки ссылок и анкоры
через родительские и дочерние узлы иisPortВозможность установить указанную ячейку в качестве заглушки ссылки, что делает ее доступной для подключения. Точка привязки - это фиксированная точка соединения вдоль макета границы узла, встроенного прямоугольника/окружности/эллипса/треугольника и других макетов границ, поддерживает настройку количества и положения точек привязки, когда указатель мыши находится над узлом, точка привязки отображается, нажмите на точку привязки Щелкните мышью, чтобы активировать соединение.
Щелкните и выберите поле
Выберите узел при нажатии на узел/ребро, нажмите Cmd/Ctrl и щелкните непрерывно, чтобы выбрать несколько узлов одновременно.rubberbandЭлемент конфигурации для включения возможности выбора кадра при поддержкеselectionPreviewОпции настраивают стиль выбранных узлов/ребер.
линия привязки
Линия выравнивания — вспомогательный инструмент для набора мобильных узлов, по умолчанию он отключен, доступ к нему можно получить с помощьюguideЭлемент конфигурации включает и настраивает стиль линий привязки.
миникарта
Поддерживает настройку детализации рендеринга и настройку стиля, то есть нужно ли отображать узлы/ребра на миникарте.По умолчанию визуализируются только узлы. На миникарте полный узел не рисуется, а вместо узла используется цветовой блок, и цвет цветового блока можно настроить.
Компоненты пользовательского интерфейса
Для создания сложного приложения для редактирования графиков также требуются такие компоненты пользовательского интерфейса, как Menubar, Toolbar, Dropdown, ContextMenu и Splitbox.x6-componentsНекоторые такие компоненты React представлены вantdиспользовать.
наконец
Большое спасибо за ваше терпеливое чтение. X6 все еще новорожденный. Хотя внутренняя бета-версия уже запущена в нескольких приложениях продукта, таких как внутренние исследования и разработки данных (диаграмма ER), центр эксплуатации и обслуживания (блок-схема) и т. д. ., я считаю, что есть еще много проблем, которые нужно улучшить. , добро пожаловать вGitHubДайте нам обратную связь. Если вы заинтересованы в X6 или других продуктах в рамках AntV, вы можете следить за нами по следующим каналам:
- Гитхаб:github.com/antvis/x6
- Официальный сайт AntV:antv.vision
- AntV GitHub: github.com/antvis
Оригинальная ссылка:Уууууу. Yuque.com/press TV/blog/small…