Я пытаюсь нарисовать направленный ациклический граф, используя d3.js. При поиске макета я столкнулся с Dagre, но, похоже, он менее полезен, так как я не хочу использовать код на основе DOT в любом месте. Если кто-нибудь знает о чистом решении Javascript для этого или плагина/пользовательского макета для DAG, пожалуйста, дайте мне знать. Заранее спасибо.Направленный ациклический граф с использованием d3.js без DOT
Dagre автор здесь. Dagre не содержит никакого кода graphviz - это чистый JavaScript. Однако он основан на аналогичных методах компоновки; оба они основаны на методах из газеты Сугияма.
Вы можете найти некоторые примеры dagre здесь:
http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
Минимизированный источник можно найти здесь: http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js. Он работает около 44K.
Оказание ориентированных ациклических графов (и фактическое выделение свойства направленности) является областью алгоритмов компоновки Sugiyama.
В основном они назначают слои (через топологическую сортировку) узлам, а затем вычисляют последовательность для узлов в слоях. Сначала с помощью простой эвристики для обратного цикла это хорошо работает и для циклических графиков. GraphViz DOT имеет реализацию этого макета под названием dot, который также является именем используемого формата файла, поэтому иногда иногда возникает путаница, когда упоминается DOT.
Конечно, существуют другие реализации алгоритма, даже кросс-скомпилированная версия Javascript точки available. Вероятно, наиболее полнофункциональное решение, доступное для Javascript, представляет собой коммерческую реализацию алгоритма в библиотеке yFiles. Так что если это в коммерческом сценарии, вы можете взглянуть на соответствующий live demo. Обратите внимание, что хотя yFiles имеет собственную реализацию рендеринга и редактора, вы все равно можете подключить код к d3.js, поскольку алгоритмы компоновки могут использоваться как автономные реализации, чтобы «просто» вычислить координаты узлов, граничные точки соединения, изгибы и метки. Эта конкретная реализация поддерживает большое количество дополнительных ограничений, таких как «Ограничения портов» (чтобы ограничить направление исходящих и входящих ребер, а также их точное местоположение в узлах), иерархически сгруппированные узлы (где каждый узел может иметь родительский узел а родительский узел «содержит» все его дочерние узлы), ограничения уровня и последовательности, ограничения маркировки границ, различные стили маршрутизации границ, маршрутизацию шины и т. д.
Раскрытие информации: Я работаю в компании, которая создает указанную библиотеку, однако на СО Я не представляю своего работодателя.
Спасибо. В принципе, я уклоняюсь от использования графикаViz, поскольку он требует компиляции для каждой ОС, но я посмотрю на yFiles. –
@AmitGupta: Кросс-скомпилированную версию GraphViz для Javascript не нужно, конечно, «перекомпилировать». Однако он по-прежнему чувствует себя огромным двоичным блобом в браузере - у него нет реального API, но он больше похож на консольное приложение, даже в браузере. – Sebastian
Да. Согласен. Похоже, что существует необходимость в пользовательском макете. –
Спасибо, Крис. Теперь я подробно изучил дагро, но все еще неясно, о некоторых аспектах: 1. Может ли он обрабатывать циклы в графике, но не большое ограничение? 2. Могу ли я иметь значки вместо основных фигур в графическом макете? –
1) Он может обрабатывать графики с циклами. 2) Он не имеет специальной обработки для фигур, отличных от прямоугольников. Однако вы можете переопределить функцию, которая рисует форму узла (renderer.drawNode (yourDrawNode)). Вы можете увидеть пример того, как это работает здесь: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html. Кроме того, вы можете использовать HTML, путем запуска метки с помощью элемента HTML. См. Этикетку для узла A в этом примере: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html. –
Спасибо, Крис. Это действительно полезно. –