(计算机)网络图的最适当布局

Question

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

简化用例-解释布局要求

用例是VPC (巨大的盒子)，里面有AZ (2或3个大的盒子互相叠在一起)，子网在每个里面(盒子堆放在一起)，EC2s在里面(很多小的盒子互相叠在一起)。

​

​

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

我想要的是.

• 我想知道在我的研究中是否遗漏了一些显而易见的东西(就HTML5 5/JS解决方案的选择而言)
• 我是采取了正确的方法来寻找一个框架，还是这些要求太特殊了？
• 我应该考虑写我自己的布局(还是有人对好的布局有一个好的想法？)
• 是否有一个框架可以很好地进行可视化分组(例如，画一个包含较小框的大框，可能有几个层次深)

我的研究：

1. Webcola (可与d3一起使用) http://marvl.infotech.monash.edu/webcola/
2. D3 http://d3js.org/
3. 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

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

JointJS

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

这似乎有一个很好的例子，似乎是一个组和输入/输出(虽然节点可以摆脱其父节点的边界，这并不理想。

Answer 1

如果我很好地理解了您的问题，那么只能使用HTML/CSS：

• VPC div (容器)相对于左浮动的位置。
• 将相对位置也放置在再次浮动的左边和清晰的左边，如果
• 您想要创建另一行

注意div的宽度。