javascript - 使用 CoSE Bilkent 布局强制某些节点的位置

Question

我正在处理复合图。我知道父节点的位置(例如:地理坐标)，我想布置子节点以最小化边缘的交集。 children 的最终位置并不重要，只要他们彼此靠近即可。

带有 Cytoscape.js 的 CoSE Bilkent 算法为我提供了正确的布局，但我想设置父节点的位置并将它们锁定到位。

我做了什么:

1. 开始于 this example但节点较少；
2. 设置每个组的位置:
   1. 只有 parent ；
   2. 父项及其子项的坐标相同；
3. 调整了布局的一些选项；
4. 尝试了属性 locked运气不好

我得到的最好的是this .

到目前为止，组的相对位置是正确的，但如果我添加一个新组 g5我得到了 this .

想要的结果应该是这样的:

如果需要，我愿意使用另一个库。

Answer 1

(1) 父项的位置和维度由其子项的位置和维度暗示。

(2) 您可以在图形的子集上运行布局(例如，仅限 child ):http://js.cytoscape.org/#collection/layout

(3) 以高效的方式避免边缘在布局中相互重叠是一个活跃的、 Unresolved 研究问题。此外，有些图表不是平面的。

尝试使用 (2) 在每个父级的后代的子图上运行布局:

var topLvlParents = cy.nodes().orphans(':parent');

topLvlParents.forEach(function( parent ){
  var descendants = parent.descendants();
  var edges = nodes.edgesWith( nodes );

  descendants.union( edges ).layout( someLayoutOptions );
});

您可以使用 cose-bilkent 作为子图布局，并在 layoutstop 上将位置调整到您想要的边界框(如果使用 boundingBox native 支持，这会更容易在 cose-bilkent 中)。或者您可以使用 cose——它不像 cose-bilkent 那样复杂，但现在允许直接放置 boundingBox。

如果您的复合父子层次结构只有一层，那么您也可以尝试在具有 boundingBox 的子级上使用任何非复合布局。

我的理解是，CoSE Bilkent 是复合节点布局的最先进算法。它来自专门研究图论、布局等的大学实验室。