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

Question

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

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

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

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

另一个例子是：

Answer 1

我会看一下以下的库：

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

Answer 2

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

具体来说，yFiles for HTML提供了您在浏览器中寻找的功能：

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

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

^{披露：我为创建该图书馆的公司工作，但我并不代表我的雇主。我的帖子和想法都是我自己的。}

Answer 3

这是pyhole的屏幕截图！

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