最适合（计算机）网络图的布局
Dre*_*ury 5 html javascript diagram networking d3.js
我正在尝试开发一个基于 HTML/JS 的“（计算机）网络图”。我的意思是盒子链接到其他盒子，更重要的是，盒子包含在其他盒子的边界内。
简化用例 - 解释布局要求
用例是 VPC（大盒子），内部有 AZ（2 或 3 个大盒子并排堆叠），每个子网内都有子网（盒子相互堆叠），里面有 EC2（很多小盒子）彼此相邻）。
虽然我尝试了多种方法（见下文），但我还没有找到适合我的图表的布局，我想知道我的需求是否如此独特以至于我需要自己动手。
我需要什么帮助...
- 我想知道我是否在研究中遗漏了一些明显的东西（就 HTML5/JS 解决方案的选项而言）
- 我是在采用正确的方法寻找框架还是这些要求太特殊了？
- 我是否应该考虑编写自己的布局（或者有人有一个好的布局开始的好主意）
- 是否有一个框架可以很好地进行视觉分组（例如，绘制一个包含较小框的大框，可能有几层深）
我的研究：
- Webcola（可以与 d3 一起使用）http://marvl.infotech.monash.edu/webcola/
- D3 http://d3js.org/
- JointJS http://www.jointjs.com/demos/devs
可乐
我最初尝试过 Webcola，因为以下示例似乎最有希望：http ://marvl.infotech.monash.edu/webcola/examples/smallgroups.html
我发现缺少文档，一些链接已失效，并且当尝试将“布局与分层分组”与“对齐约束与指南”结合起来时，页面无法加载。
D3.js
这似乎有很多文档，尽管我找不到一个接近我想要构建的示例。
https://github.com/mbostock/d3/wiki/Pack-Layout
Pack Layout 似乎最接近，嵌套用于表示层次结构。这种方法的问题是每个节点的大小不统一（我可以将它们全部设置为 1）并且示例使用圆圈（我认为这似乎是这种布局的硬性规则）。
联合JS
http://www.jointjs.com/demos/devs
这似乎有一个很好的例子，它似乎是一个组和输入/输出（尽管节点可以逃脱其父级的边界，这并不理想。