Пользователь
0,0
рейтинг
5 марта 2014 в 10:06

Разработка → Графы — sigmajs

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

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

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

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



Что такое sigmajs?


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

Возможности


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


Ссылки




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

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (16)

  • +2
    Так в итоге-то получилось сделать плавную анимацию графа на 30000 нод и с ребрами между ними? )
    • +2
      Думаю, если товарищ мой, даст добро, опишу в следующем посте подробно, что было сделано на версии 0.8.2 и как все устроено, с картинками =)
  • +3
    Да, в итоге все получилось на ура, и анимация и связи
  • 0
    А не подскажете инструмент которым можно было бы не только выводить графы, но и рассчитывать их отображения?
    К примеру — у меня есть N точек, и указана сила связи между каждыми двумя из них. Мне надо рассчитать такое размещение точек на плоскости, чтобы расстояние между ними было пропорционально силе связей. Понятно что будут несоответствия, т.к. спроецировать такой граф на плоскость можно далеко не всегда, но вот мне и нужно эти несоответствия минимизировать…
    В идеале хорошо бы еще учитывать свойства связей (жесткость, тип..), и свойства самих точек…

    Если Хабра сообществу интересно дальнещее детальное освещение simgajs
    Очень интересно)
  • 0
    Мне кажется, или D3 умеет почти тоже самое?
    • 0
      Да D3 умеет тоже самое, и рассматривали его в качестве альтернативы Сигме (канвасу), но основа D3 — SVG, производительность в разы ниже, чем на канвасе, либо на том же WebGL
      • 0
        и вот еще немного superconductor.github.io/superconductor/
        • 0
          The developer preview of Superconductor currently only supports the following platform:

          An Apple laptop/desktop computer
          Mac OS X 10.8 ('Mountain Lion') or newer
          An NVIDIA (preferred) or ATI graphics chip available in your computer
          Нам нужно было решение, которое будет работать, без крутых видеокарт и привязки к железу и софту
      • 0
        Вот пример, где используется связка D3.js и Three.js — render geographic information
  • 0
    fabricjs.com/ и cytoscape.github.io/cytoscape.js/ можете еще это глянуть =)
    • 0
      я изучу выше упомянутые либы и по ним дам отдельный коммент. Что касается весов: в сигме по умолчанию ноды имеют веса, т.е. вы можете присвоить какие вам надо, по некому алгоритму. В плане отображения. может написать плагины к той же сигме, и в зависимости от веса распределить соседние. В комплект к sigma от автора есть плагин — назовем «соседи» вытаскивает соседние ноды по ID переданной ноды. В общем мое видение и составляющие, как бы я реализовал
      • 0
        А для графов я думаю это не плохо www.graphdracula.net/
        • 0
          на вкус и цвет, товарища — нет =) но спасибо за альтернативу изучу
        • 0
          graphdracula — реализована поверх SVG. про SVG был коммент выше
  • 0
    Скажите, библиотека предоставляет какие-либо API для работы с событиями? Можно ли отрисовать с помощью неё какой-нибудь custom элемент и с помощью библиотеки использовать его как исходную точку для связи с новым узлом? Например, у меня есть кейс: есть направленный граф, на каждом узле которого находится маленький UI элемент, из которого можно «вытянуть» связь в пустоту. Как только я отпущу эту связь, на месте, где я её отпустил, должен создастся новый узел графа и к нему должна быть привязана связь от графа, с которого я начал её тянуть. Сейчас для этих целей я использую jsPlumb, но меня он не устраивает по ряду причин: например, я не могу корректировать механизмы построения связей между узлами, а мне хотелось бы рассредоточить связи так, чтобы они пересекались только при необходимости. Вернее, как вы знаете, реализовать можно всё, если очень постараться, просто хотелось бы услышать ваше мнение, подходит ли sigmajs для подобных задач? Ибо покопавшись в документации(одним глазком, правда), я не нашел нужной мне информации.
    • 0
      С событиями работать умеет: События. По описанному Вами кейсу мне уведилось, что есть все ивенты для реализации задачи.
      Касательно связей между нодами — механизмы можете корректировать. Советую Вам посмотреть на примеры плагинов на ГитХабе, и реализовать решение в виде плагина к Сигме, по опыту быстрее, проще и более гибко, так как вы имеете доступ не только в открытому API, но и к внутренностям библиотеки.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.