最适合（计算机）网络图的布局

Question

我正在尝试开发基于HTML / JS的“（计算机）网络图”。我指的是连接到其他盒子的盒子，更重要的是，盒子里面包含里面其他盒子的边界。

简化用例 - 解释布局要求

用例是带有AZ的VPC（巨大的盒子）（彼此相邻堆叠的2或3个大盒子），每个内部的子网（彼此堆叠的盒子），以及内部的EC2（批次）彼此相邻的小盒子。）

虽然我已经尝试了很多方法（见下文），但我没有为我的图表找到合适的布局，我想知道我的需求是否如此独特以至于我需要自己动手。

我想要帮助......

• 我想知道我的研究中是否遗漏了一些明显的东西（就HTML5 / JS解决方案而言）
• 我采取正确的方法寻找框架还是这些要求过于特殊？
• 我是否应该考虑编写自己的布局（或者某人有一个好的布局，以便开始使用）
• 是否有一个框架能够很好地进行视觉分组（例如，绘制一个包含较小框的大框，可能只有几个级别）

我的研究：

1. Webcola（可以与d3一起使用）http://marvl.infotech.monash.edu/webcola/
2. D3 http://d3js.org/
3. JointJS http://www.jointjs.com/demos/devs

Webcola

我最初尝试使用Webcola，因为以下示例似乎是最有希望的： http://marvl.infotech.monash.edu/webcola/examples/smallgroups.html

我发现文档缺乏，一些链接已经死亡，并且在尝试将“布局与分层分组”与“对齐约束与指南”相结合时，页面无法加载。

D3.js

这似乎有很多文档，虽然我找不到一个接近我想要构建的示例。

https://github.com/mbostock/d3/wiki/Pack-Layout

包布局似乎最接近，嵌套用于表示层次结构。 这个方法的问题是每个节点的大小不均匀（我可以将它们全部设置为1），并且该示例使用圆圈（我认为这似乎是这个布局的一个硬规则）。

JointJS

http://www.jointjs.com/demos/devs

这似乎是一个很好的例子，它看起来像是一个组和输入/输出（尽管节点可以逃脱其父节点的边界，这是不理想的。

Answer 1

如果我确实解决了您的问题，那么只能使用HTML / CSS：

• VPC div（容器）相对于并且向左浮动
如果，
• 位置相对位于另一个浮动左侧，左侧清除
• 您想要创建另一行

小心div的宽度