cy.fit() 不会立即生效，它需要超时才能适应图表。细胞景观js

Question

所以在初始化图表后，我想通过使用 cy.fit() 使其适合其 div。我这样做了：

var cy = cytoscape({
        container: document.getElementById("cy"),
        elements: {
            nodes: nodes,
            edges: edges
        },
        layout: {
            name: 'dagre',
            
        },
          
        style: [
            {
              selector: 'node',
              css: { 
                'label': 'data(id)',
                'background-color': '#808080'
             }
 
          ]
      });

所以在这部分之后如果我这样做

cy.fit()

它不起作用。但如果我这样做：

setTimeout(() => { 
        cy.fit();
    },1000);

有效。然而，首先显示未拟合的图形，然后在 1000 毫秒后显示正确的图形拟合。因此当一个页面被加载时，看起来图形被写了两次。

我该如何解决这个问题？有没有办法用这个 'fit' 选项来初始化图形？或任何其他修复方法？

谢谢

Answer 1

Cytoscape.js 通过 cy.ready() 处理这个问题。像这样使用它：

var cy = cytoscape({
  container: document.getElementById("cy"),
  elements: {
    nodes: nodes,
    edges: edges
  },
  layout: {
    name: 'dagre',
  },
  style: [{
    selector: 'node',
    css: {
      'label': 'data(id)',
      'background-color': '#808080'
    }
  }]
});

cy.ready(function() {
  cy.fit();
});

此外，您可以为此使用布局选项 fit：

layout: { name: 'dagre', fit: true }

cy.fit() 不会立即生效，它需要超时才能适应图表。细胞景观js

cy.fit() does not work immediately, it needs timeout to fit the graph. Cytoscape js

javascript

synchronization

asynchronous

graph

cytoscape.js