Рисование направленных ациклических графов в веб-приложении - доступен только странный подход?
В настоящее время мы создаем веб-приложение (AngularJS), которое должно рисовать ориентированные ациклические графы (до 1000 узлов, до 10000 ребер) на основе динамически создаваемых данных.
Уже более года я ищу библиотеку / инструмент, который рассчитывает требуемый макет и рисует график, который можно стилизовать, масштабировать и панорамировать, интерактивный (например, выделять детей при наведении курсора мыши).
Graphviz - это инструмент, который дает лучшие результаты, но на самом деле он не готов к использованию на веб-серверах (тем более, что я не могу гарантировать ОС и не хочу).
Я попробовал dagre и это рендеринг d3 - и мне это очень нравится, но у него есть два основных недостатка: 1) он не поддерживает ранжирование и кластеризацию - что делает вывод довольно хаотичным и 2) графы увеличивают свою производительность становится неприемлемым.
Следующей вещью, которая действительно выглядела убедительно, был cytoscape.js, так как вывод выглядит очень хорошо, и он довольно быстр в рисовании даже больших графиков (и допускает некоторую настройку производительности). Но его стандартное расположение (например, cose или breadthfirst) не дает нужного нам результата.
С моей нынешней точки зрения есть два шанса:
1) Создать макет с помощью dagre.js и нарисовать результат с помощью cytoscape.js (макет: 'preset', используя вычисленные значения x и y для узлов из макета dagre). Но "соединения" / кластеры не поддерживаются таким образом.
2) Использование [viz.js]( https://github.com/mdaines/viz.js) (версия Graphviz с зашифрованным Javascript, опять же не очень хорошо работающая при рисовании графиков) для вычисления результата в виде простого выходного формата и снова используя этот результат, чтобы нарисовать его с помощью cytoscape.js.
Теперь мой вопрос (ы):
1) Есть ли у вас другая идея, как этого добиться?
2) Не могли бы вы дать мне подсказку о том, как в идеале связать цепочку, если мои идеи верны?
(AngularJS -> REST Backend -> JSON to Frontend -> Реструктуризация JSON для dagre или viz -> Вычисление макета -> Ввод результата в Cytoscape -> Визуализация в браузере?!?) И есть ли шанс сделать вычисление макета на моем сервер внешнего интерфейса node.js, а не сам клиент (опять же из-за производительности)?
Любой намек и идея приветствуются.
2 ответа
Похоже, вы недовольны Dagre как составной макет. Это имеет смысл, потому что автор Dagre не реализовал комплексную поддержку для него. Dagre отделен от Cytoscape.js, но может использоваться им. Вы заметите, что автор Dagre заявил, что больше не будет обновлять библиотеку новыми функциями от себя. Таким образом, ваши варианты:
(1) Используйте другой макет Cytoscape.js, фактически разработанный для составных узлов, таких как CoSE или Cola.
(2) Напишите свой собственный макет для Cytoscape.js, который соответствует вашим потребностям: http://js.cytoscape.org/
(3) Адаптируйте Dagre для распознавания составных узлов и сделайте запрос на получение разрешения автору: https://github.com/cpettitt/dagre Затем макет Cytoscape.js для Dagre можно обновить, чтобы использовать новые добавленные вами API-интерфейсы Dagre.
В настоящее время составная компоновка графиков является открытой областью исследований, поэтому вам будет сложно найти множество макетов, которые их вообще поддерживают, в любой библиотеке. Cytoscape.js имеет несколько составных вспомогательных макетов, и вы можете свободно их разветвлять, если хотите другое поведение. Также обратите внимание, что ветка 2.5 имеет CoSE2 с улучшенным алгоритмом.
Cytoscape.js может использовать макет Dagre. Вы можете посмотреть здесь в документации Cytoscape для получения дополнительной информации, но вы можете просто добавить свои узлы и ребра на график, а затем запустить макет Dagre. Таким образом, вам не нужно позиционировать все узлы вручную в зависимости от положения узлов из отдельного dagre.js.