javascript - 最适合(计算机)网络图的布局

Question

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，describe the problem以及迄今为止为解决它所做的工作。


8年前关闭。







Improve this question




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

简化用例 - 解释布局要求

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



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

我需要什么帮助...

我想知道我的研究中是否遗漏了一些明显的东西(就 HTML5/JS 解决方案的选项而言)

我是否采取了正确的方法来寻找框架，或者这些要求是否过于特殊？

我是否应该考虑编写自己的布局(或者有人有一个好的布局开始的好主意)

是否有一个可以很好地进行视觉分组的框架(例如，绘制一个包含较小框的大框，可能有几层深)

我的研究:

Webcola(可与 d3 一起使用)http://marvl.infotech.monash.edu/webcola/

D3 http://d3js.org/

联合JS 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

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

Answer 1

如果我确实很好地理解了您的问题，则只能使用 HTML/CSS 来完成:

VPC div(容器)位于相对位置并左浮动

如果

你想创建另一行

注意div的宽度