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), чтобы избежать ошибок, подобных этому.