Привет, уважаемое Хабра сообщество. В один из прекрасных летних дней, позвонил мне мой товарищ, и сказал, что у него есть для меня очень интересная задача. Я люблю интересные задачи. Приехав на следующий день в офис, мы обсудили задачу. Задача, в двух словах, поставлена была следующая: отобразить на браузерном канвасе иерархию ~ 30000 пользователей с зависимостью между ними, плюс должна присутствовать некая анимация, которая в контексте данного поста не существенна, может в будущих, если на то будет время и Ваше одобрение.
Мы ударили по рукам, я сказал, что мне нужно провести «изыскания», так как сфера (JS + Canvas), была для меня была нова, и выяснить насколько развитие браузерных технологий соответствует реалиями поставленной задачи.
Через некоторое, не долгое время, я наткнулся на замечательную библиотеку — sigmajs, на тот момент была версия 0.8.2, если мне не изменят память, которая удовлетворила почти все наши амбициозные потребности.
С тех пор, много воды утекло, появилась версия сигмы 1.0.0, я обрел новый багаж знаний в сфере JS + Canvas и веба в целом. Для тех, кого я заинтриговал, прошу под кат, где будет дан краткий обзор библиотеки — sigmajs.
Что такое sigmajs?
Волный перевод определения, данного самим автором: Сигма JavaScript библиотека, предназначенная для рисования графов. Она легко позволяет опубликовать «сети» (графы) на Веб страницах, и позволяет разработчикам интегрировать, исследование (изучение) сети (ей) в Веб приложения.
Возможности
- Сигма предоставляет много возможностей из коробки, такие как рендеринг на Canvas и WebGL или поддержка мышки и тача, что делает интерактив пользователя с графом простым и удобным
- Конфигурация по умолчанию, имеет поддержку мыши и тача, перерисовка и масштабирования графа, в ответ на изменения размера контейнера, рендер на WebGL канвасе, если поддерживает бразуер, либо на 2D канвасе, адаптация размеров нод (узлов гафа) и граней к размеру экрана
- Практически все аспекты работы сигмы можно настроить, как Вам угодно через настройки, включить или выключить интерактив с графом для конечного пользователя. Также можете добавить кастомный функционал рендера нод или граней, как душе угодно
- Сигма библиотека для рендеринга графов, в первую очередь, поэтому Вы сами выбираете, насколько будет граф интерактивным для пользователя, будет ли он интерактивным вообще. API сигмы позволяет изменять данные для графа, двигать камеру, подписаться на события и т.д.
- Поддержка формата GEXF для данных графа
- Поддержка плагинов
Ссылки
- Сайт сигмы
- GitHub репозиторий
- Примеры
- Плагины
P/S/ Авторы сигмы проделали огромную работу за последние пол года. Им спасибо!
P/P/S Если Хабра сообществу интересно дальнещее детальное освещение simgajs, будь то переводы документации, либо туториалы, пишите в комментарии
P/P/P/S Спасибо за время! Надеюсь информация для Вас была полезной =)
Автор: houk
