如果我们使用节点数计算动态高度，则 Cytoscape Fit 功能不起作用

如何解决如果我们使用节点数计算动态高度，则 Cytoscape Fit 功能不起作用

我使用 Cytoscape Dagre 扩展从左到右显示分层图。它有 14 个孩子和一个父母 1 和主要父母。我正在使用节点数计算容器的高度。然后我在创建布局后调用 fit 函数但它不起作用。

我添加了一个适合按钮，如果我在加载图表后点击它，它就会起作用。我究竟做错了什么？我希望在图形初始化后调用 fit 函数。

这是 stackblitz 链接：https://stackblitz.com/edit/dagre-childrenconnected-fit?file=src%2Fapp%2Fapp.component.ts

您可以尝试单击“适合”，如果您单击“适合”按钮，则会看到图形是否正确适合，但如果您刷新页面，则它不起作用。

解决方法

您的代码运行不正常，存在一些错误。

(1) 首先，您的“动态高度”[ngStyle]="{'height': heightTest + 'px'}" 在图形初始化时未定义，之后会遇到奇怪的错误。只需使用 [ngStyle]="{'height': '100vh'}" 之类的东西，然后从那里开始。

(2) 正如文档所说：

如果您的代码调整了图形的尺寸或位置（即通过更改保存图形的 HTML DOM 元素的样式，或通过更改 DOM 元素在 DOM 树中的位置），您将需要调用 cy.resize( ) 调整图形大小并重新绘制。

您的方法并不理想，我建议您只更改容器的高度，然后调整图形大小/拟合图形：

let container = document.getElementById("cy");
// just some random height depending on the number of nodes
container.style.height = `${this.cy.nodes().length * 40}px`;

this.cy.resize();
this.cy.fit();

这是编辑后的 StackBlitz：link