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

Question

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

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

示例网络图

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

选项 1：网格然后 CoSE

1. 选择每个子网（父节点）并在其上运行网格布局，强制行/列使纵横比看起来很好，子网之间的间距一致。
2. 选择除子节点之外的所有内容并运行 CoSE。

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

选项 2：CoSE 然后网格

1. 使用 CoSE 布局所有内容。
2. 选择每个子网（父节点）并在子节点上运行网格布局。

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

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

1. 在每个子网（父节点）上运行网格。
2. 复制整个图，用与复合 bb 大小相同的单个大节点替换子网子网。
3. 在整个临时图上运行 CoSE 以获得格式良好的结果。
4. 从临时图中提取位置以更新原始图。

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

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

Answer 1

要记住的事情：

(1) 复合布局必须在儿童和家长的操作下才能正常工作。

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

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