javascript - 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

您尚未定义位置，因此节点无法渲染。显式定义节点的位置或显式调用布局。

说明：假设这是在页面的 init 上，您已经创建了一个竞争条件：图表无法呈现，直到DOMContentLoaded. 因此，布局会延迟到该事件之后。您已经创建了id1在布局之前id2添加并在之后添加的情况。所以，id1有位置可以渲染，但是id2没有位置不能渲染。

在 2.4.8 中，节点的默认位置将是 (0, 0)，以便更容易避免此类错误。