4

プロセスチャートをスイムレーン形式でレイアウトするのに役立つアルゴリズム/ライブラリを探しています。

例:

靴の製造と販売のプロセスは次のようになります (非常に単純化されています)。

  • 皮革会社が皮革を届ける
  • 靴屋は革から靴を作る
  • 靴の小売業者は靴を販売しています

この場合、これをスイムレーン形式で表示したいと考えています。つまり、各ロール (皮革会社、靴メーカー、靴小売業者) にはスイムレーンがあります。各スイムレーンには、対応するプロセスステップが表示されます。これは、UML アクティビティ図に非常に似ています。

これを行うことができるライブラリはありますか? d3.js を見てみましたが、自動レイアウトが可能かどうかはわかりません。

または、この特定の目的のためのライブラリがない場合、この場合に使用できる最先端のアルゴリズム (おそらく存在しますが、まだ見つけていません) はありますか?

4

1 に答える 1

3

実装するアルゴリズムを求めている場合は、有向グラフを描画するための杉山アルゴリズムを検討することをお勧めします。スイムレーンなどの機能をサポートするには、アルゴリズムを次のように拡張する必要があります。

グラフのメイン フローがスイム レーンが指している方向と同じである場合、シーケンシング フェーズ中にノードを制約して、スイム レーンと同じ順序に従ってレイヤーごとに同じ方法で順序付けされるようにする必要があります。スイム レーンが流れに対して直交している場合は、同じようにレイヤリング フェーズに影響を与え、制約する必要があります。両方の概念を組み合わせて同時に機能させることができるため、スイムレーンの列と行の 2D グリッドを実装できます。また、アルゴリズムの最終ノード座標割り当てステージを調整して、順序付けられたノードをスイムレーンの境界に従って整列させる必要があります。

これは非常に重要であり、利用可能な適切な実装はあまりありません。これを実行できる d3js の無料の実装については知りません。

私が働いている会社 (ここでは代表者ではありませ) には、この機能を提供する商用ライブラリがあります。このライブの例を参照してください:

スイムレーンを示す yFiles for HTML Demo アプリケーションのスクリーンショット

于 2015-08-25T07:25:16.160 に答える