javascript - 细胞景观 : Add element in setTimeout doesn't get rendered

Question

在下面的代码中，我在 setTimeout 中向图形添加了一个节点，但它没有呈现。当我将代码移出 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)以便更容易避免此类错误。