Cytoscape 中的动态/可滚动容器大小（+ cy.fit() 问题）

Question

所以我最近一直在尝试 Cytoscape。我的项目的目标基本上是一个协作图，人们将能够向/从中添加/删除节点，使其在此过程中成长。该图将包含许多复合节点。

我见过的大多数示例都使用占据 100% 屏幕空间的容器 div。这对于“受控”图来说很好，但在我的情况下不起作用，因为它的大小是动态的。

这是一个在固定的 3000px/3000px 容器中使用 circle 布局的 JSFiddle： https://jsfiddle.net/Jeto143/zj8ed82a/5/

1. 有没有办法让容器大小是动态的，而不是明确说明它？还是我每次都必须以某种方式计算新的最佳容器大小，然后调用cy.resize()？ 编辑：实际上，无论网络有多大，使用 100%/100% 进入cy.fit() 可能都行得通，所以请忽略这个问题。

2. 是否有推荐的布局以非分层方式显示大量/未知数量的数据，以尽可能最有效的方式“智能”放置节点（包括复合节点），同时避免任何重叠? （我想这有很多要问的......）

3. 为什么cy.fit() 在我的示例中似乎不起作用？我在图形初始化和 CTRL+单击节点（以显示封闭的邻域）时都使用它，但它似乎不喜欢 3000x3000px 容器（100%x100% 似乎更好）。 编辑：如果您忽略了 1.，也请忽略此问题，因为 100%/100% 似乎也很好。

任何帮助/建议将不胜感激。

非常感谢您。

Answer 1

TLDR：它是 (1)。

Cytoscape 具有可平移的视口，就像地图一样。您可以在 CSS 中定义视口 (div) 的尺寸。视口中显示的是节点位置、缩放级别和平移级别的函数——就像地图视口中可见的是缩放、平移和兴趣点位置的函数一样。

所以要么你必须

(a) 在缩放和平移方面重新考虑您的 UI，并使用 Cytoscape 中的那些内置功能，或者

(b) 在 Cytoscape 中禁用缩放和平移（在缩放 1 时可能停留在 (0, 0)）并让用户在您向图形添加内容时滚动页面并调整其容器 div 的大小以适应新内容。