【问题标题】:How to deal with multiple trees situation when using dagre layout in Cytoscape.js在 Cytoscape.js 中使用 dagre 布局时如何处理多棵树的情况
【发布时间】:2015-08-17 01:25:34
【问题描述】:

我是 Cytoscape.js 的新手,并尝试根据用户的搜索输入借助 Dagre 布局绘制图形。节点数通常为 50-100。

虽然Dagre对单棵树效果很好,但是当图包含多棵树(有时还包括独立的节点)时,这些树的根会自动水平排列(如图所示),这使得节点和标签变得非常小的。如果我们能利用水平空间,图表肯定会更清晰。

我的问题是,我们如何处理多棵树的情况,将树垂直排列(例如,4个根在一行中,其他的可以排列在这些树下)以充分利用布局空间。

【问题讨论】:

  • 那么,一旦布局准备好,是否可以使用dagre布局的位置结果,重新计算每个节点的位置?
  • 我有一个愚蠢的问题:有什么理由不简单地为每个根创建一个图?
  • 嗯,我在问题中提到的“树”不是典型的树状结构。它们是复合节点。 “树”之间也有边缘(我添加了一张照片以更好地解释这一点)。在这种情况下,我不确定多个布局是否可以解决这个问题?如何处理不同“树”之间的边缘?

标签: javascript tree cytoscape.js dagre


【解决方案1】:

查看 rankDir 布局方向选项:http://js.cytoscape.org/#layouts/dagre

要获得更多控制,请尝试为每个子图/树运行一个布局:http://js.cytoscape.org/#collection/layout

您可以使用每个子图的boundingBox 来控制子图的位置。

有关配置选项的详细信息,另请参阅 Dagre 文档:https://github.com/cpettitt/dagre/wiki

【讨论】:

  • 谢谢,@maxkfranz。作为我对 yochannah 的回复,我添加了一张图片来更好地解释我遇到的问题。实际上,当存在太多大型复合节点(有很多子节点)时,我想将复合节点水平放置。具有默认设置的 Dagre 会产生节点水平组织的结果。不知道子图思想能否处理复合节点间的边?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-05-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-06-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多