gpt4 book ai didi

cytoscape.js - 计算机网络图混合布局的正确方法

转载 作者:行者123 更新时间:2023-12-04 04:37:46 24 4
gpt4 key购买 nike

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

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

example network graph

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

选项 1:网格然后 CoSE

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

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

    选项 2:CoSE 然后网格
  • 使用 CoSE 布局所有内容。
  • 选择每个子网(父节点)并在子节点上运行网格布局。

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

    选项 3:网格,然后在多个图形上进行 CoSE
  • 在每个子网(父节点)上运行网格。
  • 复制整个图,用与复合 bb 大小相同的单个大节点替换子网子网。
  • 在整个临时图上运行 CoSE 以获得格式良好的结果。
  • 从临时图中提取位置以更新原始图。

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

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

    最佳答案

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

    关于cytoscape.js - 计算机网络图混合布局的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35447900/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com