Cytoscape的：在setTimeout的添加元素不会被渲染

Question

在下面的代码，我的一个节点添加到setTimout图，但它不是渲染。当我将代码移出setTimeout时，它被绘制出来。任何原因 ？

var cytoscape = require('cytoscape'); 

var cy = cytoscape({ 
    container: document.getElementById('container'), 
    layout: { 
     name: 'circle' 
    } 
}); 

cy.add({ 
     group: "nodes", 
     data: { 
      id: 'id1' 
     } 
    } 
); // this adding is drawn 
console.log(cy.nodes()); // this shows that the node with id:id1 is added 

setTimeout(function() { 
    cy.add({ 
      group: "nodes", 
      data: { 
       id: 'id2' 
      } 
     } 
    ); // this one doesn't get drawn 
    console.log(cy.nodes()); // BUT, this shows that the node with id:id2 is added 
}, 500); 

Answer 1

您还没有定义位置，所以节点无法呈现。明确定义节点的位置或明确调用布局。

说明：假设这是在页面的初始化，您已经创建了一个竞争条件：图表无法呈现，直到DOMContentLoaded。所以，布局会延迟到事件发生之后。您已经创建了在布局前添加id1并在之后添加id2的情况。所以，id1有一个位置，可以呈现，但id2没有位置，无法呈现。

在2.4.8中，节点将有a default position of (0, 0)，使其更容易避免这样的错误。