2015-08-18 3 views
3

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

Пример:

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

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

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

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

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

+0

Добро пожаловать на SO. К сожалению, ваш вопрос не по теме. SO не является LMGTFY. Вернитесь назад, когда у вас есть алгоритм и столкнулись с проблемами, использующими его. –

+0

Ищите библиотеки диаграмм бизнес-процессов и обозначений (BPMN), так как 'bpmn' сильно использует swimmlanes – xmojmr

+0

См. Также [Переполнение стека: библиотека визуализации графиков в JavaScript] (http://stackoverflow.com/questions/7034/graph- visualization-library-in-javascript) – xmojmr

ответ

0

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

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

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

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

Screenshot of yFiles for HTML Demo application showing swimlanes

Смежные вопросы