使 Cytoscape.js 容器足够宽和足够长

Question

我正在使用 Cytoscape.js 在单独的画布中渲染几个树布局。

目前，每个画布都被一个具有设定尺寸（例如 400x400）的容器 div 包围。 Cytoscape 提供了一种设置，可将每棵树放入其容器中，并将每棵树放大到必要的程度，以使整棵树在给定尺寸内可见。

我不想让每个布局适应容器，而是调整每个容器的大小以完美适应其子画布。换句话说，我需要一种方法来询问 Cytoscape 画布的每个实例，“在 0 缩放时你的宽度和高度是多少”，或者“在每个方向上需要多少像素才能完全绘制”，然后调整每个适当的容器。

Cytoscape 确实提供了获取画布的 width() 和 height() 的方法，但这些最终是实际尺寸（可能不适合容器），而不是“所需”/需要的尺寸。

我突然想到，我可以想出一些启发式方法来根据节点和边的数量来设置容器的宽度和高度，但是这种方法还没有被证明是有效的；节点和边的数量几乎不能告诉我最终的布局和排列，仅此一项就可以决定所需的宽度和高度。

Answer 1

您是否尝试过使用：

eles.boundingBox(options);

或：

eles.renderedBoundingBox();

'eles' 必须是这样的：

var eles = cy.elements();

您可以通过 cytoscape 方法获取有关节点的两个信息： cytoscape 中的实际位置及其渲染位置，请阅读本文了解更多信息：

http://js.cytoscape.org/#notation/position

关于你的第二个问题：

只需调用即可对齐树非常容易

cy.fit(/*eles, padding*/); // Pan and zoom fitted to the tree
cy.center(/*eles*/); // Moves the graph to the exact center of your tree
cy.elements().shift('x', offset); // Moves the nodes to the right, offset must be negative to move them to the left