泳道图的自动布局[关闭]

Question

我正在寻找可以帮助我以泳道格式布置流程图的算法/库。

例子：

制作和销售鞋子的过程可能如下所示（非常简化）：

• 皮革公司提供皮革
• 鞋匠用皮革制作鞋子
• 鞋类零售商卖鞋

在这种情况下，我希望它以泳道格式显示，即每个角色（皮革公司、鞋匠、鞋零售商）都有一个泳道。在每条泳道上都会显示相应的流程步骤。这与 UML 活动图非常相似。

有没有图书馆可以做到这一点？我看过 d3.js，但我不确定他们是否能够自动布局。

或者，如果没有任何用于此特定目的的库，是否有最先进的算法（可能有，但我还没有找到）我可以在这种情况下使用？

Answer 1

如果您要求实现一种算法，我建议您查看用于绘制有向图的 Sugiyama 算法。为了支持像泳道这样的特性，算法需要通过以下方式进行扩展：

如果您的图表主流与泳道指向的方向相同，则您需要在排序阶段限制节点，以便根据与游泳相同的顺序对每一层以相同的方式对它们进行排序车道。如果您的泳道与水流正交，您需要以同样的方式影响和约束分层阶段。这两个概念可以组合在一起同时工作，因此可以实现泳道列和行的 2D 网格。您还需要调整算法的最终节点坐标分配阶段，以根据泳道边界对齐有序节点。

这是非常重要的，并且没有很多可用的好的实现。我不知道可以做到这一点的 d3js 的免费实现。

我工作的公司（我在此不代表）有一个提供此功能的商业库。见this live example：