Автоматическая компоновка графиков Swimlane

Я ищу алгоритмы / библиотеки, которые помогают мне составлять схемы процесса в формате плавательных дорожек.

Пример:

Процесс изготовления и продажи обуви может выглядеть так (сильно упрощено):

  • Кожаная компания занимается поставками кожи
  • сапожник создает туфли из кожи
  • Магазин обуви продает обувь

В этом случае я хочу, чтобы это отображалось в формате дорожки, то есть каждая роль (кожевенная компания, сапожник, продавец обуви) имеет полосу плавания. На каждой дорожке для плавания будут отображаться соответствующие шаги процесса. Это очень похоже на диаграммы активности UML.

Есть ли библиотеки, способные сделать это? Я посмотрел на d3.js, но я не уверен, способны ли они на автоматическое размещение.

Или, если нет никаких библиотек для этой конкретной цели, есть ли современные алгоритмы (возможно, есть, но я их еще не нашел), которые я мог бы использовать в этом случае?

3

Решение

Если вы запрашиваете алгоритм для реализации, я предлагаю взглянуть на алгоритм Sugiyama для рисования ориентированных графов. Чтобы поддерживать такую ​​функцию, как дорожки, алгоритм должен быть расширен следующим образом:

Если основной поток ваших графиков направлен в том же направлении, на которое указывают дорожки для плавания, вам нужно ограничить узлы на этапе последовательности, чтобы они были упорядочены таким же образом для каждого слоя в том же порядке, что и дорожки для плавания. Если ваши дорожки для плавания перпендикулярны потоку, вы должны таким же образом влиять и ограничивать фазу наслоения. Обе концепции могут быть объединены для совместной работы одновременно, поэтому могут быть реализованы двумерные сетки столбцов и строк дорожки. Вам также необходимо настроить конечную стадию назначения координат узла алгоритма, чтобы выровнять упорядоченные узлы в соответствии с границами дорожек.

Это очень нетривиально, и для этого не так много хороших реализаций. Я не знаю о бесплатной реализации для d3js, которая может сделать это.

Компания, в которой я работаю не представлять здесь) имеет коммерческую библиотеку, которая предоставляет эти возможности. Увидеть этот живой пример:

Снимок экрана: демонстрационное приложение yFiles for HTML с дорожками плавания

1

Другие решения

Других решений пока нет …