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)，使其更容易避免這樣的錯誤。