Графы — sigmajs

Привет, уважаемое Хабра сообщество. В один из прекрасных летних дней, позвонил мне мой товарищ, и сказал, что у него есть для меня очень интересная задача. Я люблю интересные задачи. Приехав на следующий день в офис, мы обсудили задачу. Задача, в двух словах, поставлена была следующая: отобразить на браузерном канвасе иерархию ~ 30000 пользователей с зависимостью между ними, плюс должна присутствовать некая анимация, которая в контексте данного поста не существенна, может в будущих, если на то будет время и Ваше одобрение.

Мы ударили по рукам, я сказал, что мне нужно провести «изыскания», так как сфера (JS + Canvas), была для меня была нова, и выяснить насколько развитие браузерных технологий соответствует реалиями поставленной задачи.

Через некоторое, не долгое время, я наткнулся на замечательную библиотеку — sigmajs ^[1], на тот момент была версия 0.8.2, если мне не изменят память, которая удовлетворила почти все наши амбициозные потребности.

С тех пор, много воды утекло, появилась версия сигмы 1.0.0, я обрел новый багаж знаний в сфере JS + Canvas и веба в целом. Для тех, кого я заинтриговал, прошу под кат, где будет дан краткий обзор библиотеки — sigmajs.

Что такое sigmajs?

Волный перевод определения, данного самим автором: Сигма JavaScript библиотека, предназначенная для рисования графов. Она легко позволяет опубликовать «сети» (графы) на Веб страницах, и позволяет разработчикам интегрировать, исследование (изучение) сети (ей) в Веб приложения.

Возможности

• Сигма предоставляет много возможностей из коробки, такие как рендеринг на Canvas и WebGL или поддержка мышки и тача, что делает интерактив пользователя с графом простым и удобным
• Конфигурация по умолчанию, имеет поддержку мыши и тача, перерисовка и масштабирования графа, в ответ на изменения размера контейнера, рендер на WebGL канвасе, если поддерживает бразуер, либо на 2D канвасе, адаптация размеров нод (узлов гафа) и граней к размеру экрана
• Практически все аспекты работы сигмы можно настроить, как Вам угодно через настройки, включить или выключить интерактив с графом для конечного пользователя. Также можете добавить кастомный функционал рендера нод или граней, как душе угодно
• Сигма библиотека для рендеринга графов, в первую очередь, поэтому Вы сами выбираете, насколько будет граф интерактивным для пользователя, будет ли он интерактивным вообще. API сигмы позволяет изменять данные для графа, двигать камеру, подписаться на события и т.д.
• Поддержка формата GEXF ^[2] для данных графа
• Поддержка плагинов

Ссылки

• Сайт сигмы ^[1]
• GitHub репозиторий ^[3]
• Примеры ^[4]
• Плагины ^[5]

P/S/ Авторы сигмы проделали огромную работу за последние пол года. Им спасибо!
P/P/S Если Хабра сообществу интересно дальнещее детальное освещение simgajs, будь то переводы документации, либо туториалы, пишите в комментарии
P/P/P/S Спасибо за время! Надеюсь информация для Вас была полезной =)

Автор: houk

Источник ^[6]