HTML / CSS - 树布局/流程图选项

Question

我查看了可用的可用库，但似乎没有一个完全符合我的要求。

我希望能够生成一个水平的树形布局/流程图。

这是一个非常基本的图像：

每个盒子都有一个父盒子，它需要能够在我提供数据时自动流动。

另一个示例是这样的：

Answer 1

自动布局是（商业）yFiles Graph Drawing Libraries 的强大领域。

特别是yFiles for HTML 提供了您在浏览器中寻找的功能：

• 您可以自定义布局 - 在您的情况下，我建议使用GenericTreeLayouter，将layoutOrientation 设置为LEFT_TO_RIGHT，并为您的节点配置所谓的DefaultNodePlacer。将rootAlignment 设置为LEADING 并配置首选路由样式。 (documentation)
• 您可以逐步向图表中添加新元素并使其动画流畅
• 您可以根据自己的具体要求设置可视化样式。

我相信this interactive demo 展示了许多要求，但也有more complex 演示展示了您问题的流程图方面。

^{披露：我为创建该库的公司工作，但在 SO 上我不代表我的雇主。我的帖子和想法是我自己的。}

Answer 2

我会看看以下库：

1. JSPlumb
   • 这有一个层次结构选项，我认为这是您正在寻找的。这是Demo。
2. mxgraph

Answer 3

这是pyhole的截图！

这是使用KineticJS 完成的，这是一个在 HTML 画布之上提供抽象的已失效项目。通过对地图/链的布局进行一些数学运算，手动/绝对定位每个椭圆形。