最适合的计算机网络图示布局方式

Question

I希望开发基于HTML/JS的“(计算机)网络图表”。我的意思是，方框链接到其他方框，更重要的是，在其他方框的范围内包含方框。

简化用例-解释布局要求

使用案例是VPC(大框)，里面有AZ(2或3个相邻的大框)，每个AZ里面都有子网(叠在一起的框)，每个子网里面有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

这似乎有一个不错的例子，其中包含一个群组和输入/输出（尽管节点可能会超出其父元素的边界，这并不理想）。

- Drew Khoury

---

要求我们推荐或寻找工具、库或喜爱的外部资源的问题，因为它们往往会吸引有意见的答案和垃圾邮件，所以在 Stack Overflow 上是不适合的。相反，请描述问题以及已经采取的解决方案。 - Jim Garrison

@JimGarrison 我并不想将这个问题定位为一种工具的推荐（尽管我包含了自己的研究）。我更多的是在询问应该考虑使用什么样的布局。你认为我的问题完全与主题无关吗？我想澄清一下，我不是要求“使用这个工具，它是最好的”，而是更多地提供一个“你应该考虑一种x风格的布局”。 - Drew Khoury

关于d3.js，我会选择树形图或聚类图。 如果你真的想要像气泡一样的东西，可以看看树状图。 - tomtomtom

似乎两者都不能让我轻松地将一个节点放入另一个节点中。我不喜欢气泡，我想要方框！ - Drew Khoury

那么...你实际上想要如何使用它，我不明白最终目标是什么。这是一个工具，你会在某个地方点击然后出现一个框，还是有一个单独的表格，你可以用它来添加东西到图表中？ - duellsy

Answer 1

如果我理解您的问题正确，那么只需使用HTML/CSS即可完成以下操作：

• VPC div（容器）的位置为相对位置且向左浮动
• 相对位置也在向左浮动，如果要创建另一行，则清除左侧
• 注意div的宽度

请注意div的宽度。

- user1503892

---

我给出的示例非常简化（只是展示我需要最终达到的一般布局）。我将需要处理节点之间的链接（多个链接），父/子关系，可能会移动节点到屏幕上，对它们进行动画处理，并从源中读取数据...这是您在具有目的/自定义构建布局的图表框架中获得的东西。自己编写代码是一个潜在的解决方案，但只有在确定没有任何可以帮助搭建脚手架的东西时才想要采用这种方法。 - Drew Khoury

你看过 Darge 吗？它似乎有你需要的大部分功能（包括盒子！）。 - user1614080

我想我曾经遇到过这个问题（虽然无法记住/找到链接来回顾），但我不记得为什么它没有进入我的候选名单。它是否有一个盒子内嵌另一个盒子的示例？ - Drew Khoury

这里有一些例子：这里，这里和这里。 - user1614080

这些布局都不符合我所需的布局。 - Drew Khoury