计算机网络图混合布局的正确方法答案

【问题标题】：Proper approach for a hybrid layout of computer network graph计算机网络图混合布局的正确方法
【发布时间】：2016-02-17 04:21:00
【问题描述】：

我想使用 cytoscape.js 显示计算机网络图，我意识到这不是典型的用例。这是子网的集合（建模为复合节点），每个子网中有多个计算机工作站或服务器。子网连接到路由器、防火墙和其他构成顶层图的网络基础设施。

希望子网使用具有均匀间距的网格布局，并且为了清晰起见没有显示内部边缘，并在图表的其余部分使用类似 CoSE 的东西以适当的间距对子网进行布局。我要创建的模型视觉效果是：

对我正在尝试做的事情，或对使用现有布局完成以下三个选项有什么建议吗？我见过的所有示例一次只使用一种布局算法。

选项 1：网格然后 CoSE

目的是保留网格位置，只让 CoSE 修改其他所有内容。我试过这个，它给出了无意义的结果。这是有缺陷的，因为复合节点的位置是从其子节点的位置推导出来的。

选项 2：先 CoSE，然后是网格

我希望 CoSE 将子级定位得比网格紧凑得多，因此父级的 bb 更大/不同。稍后在子网上运行网格时，可能会导致偏移和间隙/重叠或视觉上较差的行/列纵横比。

选项 3：网格然后 CoSE 在多个图表上

这应该不会留下任何间隙或重叠，因为 CoSE 无法调整节点的大小。昂贵，但我的图表都相当小，只需要发生一次。

其他选项当然是可能的。创建结合这些功能的新布局是可能的，但目前超出了范围。也许未来的 cytoscape.js 增强功能可能是明确支持多个布局算法在单个图形上协作，每个算法负责图形的一部分。

【问题讨论】：

【解决方案1】：

我实施了选项 2 并观察了压缩和运动。不理想，但在选项 3 之前可以开发的唯一方法。

【讨论】：

【解决方案2】：

我遇到了和你一样的问题，后来发现选项 3 的变体是完全可行的。

尝试创建两个 cytoscape 实例，一个称为基本布局，另一个称为主布局。

基本布局用于排列子网（父节点）并设置为不可见。主布局中的子网在基本布局中由相应的节点表示，其高度和权重由子网的子节点数决定。我们可以使用 Grid、Cose 或其他布局类型来安排基本布局，然后我们将子网分开。

之后，我们可以分别选择主布局中的每个子网，并通过参数“boundingBox”设置其子节点的布局，该参数提供子网的范围并从基本布局中获取坐标。

如果您对结果不满意，请尝试调整基本布局的布局参数。

该方案的计算成本并不像您想象的那么昂贵，因为它将完整的排列分成小块，尤其是当您处理分散在许多子网中的大量节点时。但是有一点需要注意，不是每个 cytoscape 布局都可以在一组没有任何边的节点上使用。

【讨论】：

【解决方案3】：

注意事项：

(1) 复合布局必须对children和parents进行操作才能正常工作。

(2) 没有布局只能对复合父级进行操作。父母的立场是由孩子暗示的。

(3) 每个图表都有不同的布局需求。最终，它归结为尝试不同的策略和选项等。

【讨论】：