适用于计算机网络图的混合布局

Question

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

希望子网使用具有均匀间距的网格布局，并且为了清楚起见没有显示内部边缘，并且在图的其余部分上使用CoSE来适当地布置子网以必要的间距。我想要创建的模型视觉效果是：

example network graph

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

选项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

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

Answer 2

要记住的事情：

（1）复合布局必须对儿童和父母进行正常的工作。

（2）没有布局只能对复合父母进行操作。孩子们暗示父母的立场。

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

Answer 3

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

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

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

之后，我们可以分别选择主布局中的每个子网，并使用参数＆＃34; boundingBox＆＃34;设置其子节点的布局，提供子网的范围并从中获取坐标基本布局。

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

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