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中，节点将a default position of (0, 0)，以便更容易避免这样的错误。

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

1 个答案: