如果我们使用节点数计算动态高度，Cytoscape Fit 函数将不起作用
Cytoscape Fit function is not working if we have dynamic height calculated using number of nodes
我正在使用 Cytoscape Dagre 扩展从左到右显示层次结构图。它有 14 children 和 1 parent 1 和 main parent。我正在使用节点数计算容器的高度。然后我在创建布局后调用 fit 函数，但它不起作用。
我添加了一个适合按钮，如果我在图表加载后单击它，它就会工作。我究竟做错了什么？我希望在图形初始化后调用 fit 函数。
这是 stackblitz link：https://stackblitz.com/edit/dagre-childrenconnected-fit?file=src%2Fapp%2Fapp.component.ts
您可以尝试点击“适合”，如果您点击“适合”按钮，您会看到图表是正确适合的，但如果您刷新页面，它就不起作用了。
您的代码无法正常运行，存在一些错误。
(1) 首先，您的“动态高度”[ngStyle]="{'height': heightTest + 'px'}" 在图形初始化时未定义，之后遇到了一个奇怪的错误。只需使用 [ngStyle]="{'height': '100vh'}" 之类的东西，然后从那里开始。
(2) 正如文档所说：
If your code resizes the graph’s dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element’s position in the DOM tree), you will want to call cy.resize() to have the graph resize and redraw itself.
您的方法不是很理想，我建议您先更改容器的高度，然后 resizing/fitting 您的图表：
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
我正在使用 Cytoscape Dagre 扩展从左到右显示层次结构图。它有 14 children 和 1 parent 1 和 main parent。我正在使用节点数计算容器的高度。然后我在创建布局后调用 fit 函数，但它不起作用。
我添加了一个适合按钮，如果我在图表加载后单击它，它就会工作。我究竟做错了什么？我希望在图形初始化后调用 fit 函数。
这是 stackblitz link：https://stackblitz.com/edit/dagre-childrenconnected-fit?file=src%2Fapp%2Fapp.component.ts
您可以尝试点击“适合”，如果您点击“适合”按钮，您会看到图表是正确适合的，但如果您刷新页面，它就不起作用了。
您的代码无法正常运行，存在一些错误。
(1) 首先，您的“动态高度”[ngStyle]="{'height': heightTest + 'px'}" 在图形初始化时未定义，之后遇到了一个奇怪的错误。只需使用 [ngStyle]="{'height': '100vh'}" 之类的东西，然后从那里开始。
(2) 正如文档所说：
If your code resizes the graph’s dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element’s position in the DOM tree), you will want to call cy.resize() to have the graph resize and redraw itself.
您的方法不是很理想，我建议您先更改容器的高度，然后 resizing/fitting 您的图表：
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