-1

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

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

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

您可以尝试单击 Fit 并在单击 fit 按钮时查看图表是否正确拟合，但如果刷新页面则它不起作用。

4

1 回答 1

3

您的代码无法正常工作，存在一些错误。

(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：链接

于 2021-04-07T20:51:37.137 回答