Cytsocape.js 无法使用不存在的目标创建边缘

在使用 AJAX 请求创建节点后，我尝试创建边缘。

My code:

success: function(data) {
    $.each(data['kids'], function(i, value) {
        cy.add({
            group: 'nodes',
            data: { id: value['id'] },
            position: value['position']
        });
    })
}

这有效并创建了节点。现在，我尝试使用它来创建边缘：

cy.add({
    group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' }
});

但返回：

无法创建边缘e0来源不存在n0

无法创建边缘e0目标不存在n1

下面是我的data result:

如果我使用这段代码（作为文档中的示例），一切正常：

cy.add([
  { group: "nodes", data: { id: "n0" }, position: { x: 100, y: 100 } },
  { group: "nodes", data: { id: "n1" }, position: { x: 200, y: 200 } },
  { group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
]);

我究竟做错了什么？

就我个人而言，我不会单独添加节点和边，您可以使用数组来保存要添加的节点和边，然后调用 cy.add()：

var array = [];
// do your ajax calls
    success: function(data) {
        $.each(data['kids'], function(i, value) {
            array.push({
                group: 'nodes',
                data: { id: value['id'] },
                position: value['position']
            });
        })
    }
// add all edges
array.push({
    group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' }
});
cy.add(array);

或者，您可以尝试使用 cy.ready() 等待节点实际添加，否则可能会发生找不到 id 的情况：

cy.ready(function () {
     cy.add({
          group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' }
     });
});

编辑：您是否为ajax调用内部或外部的边缘调用cy.add()？ Ajax 是一个异步函数调用，因此在 success 函数之外调用之后的所有代码可能都会在您执行 success 中编写的内容之前执行。如果你愿意，你可以等待它完成并将第二个 cy.add() 放在 Promise 处理程序中，如下所示：

https://blog.revathskumar.com/2016/06/why-i-prefer-ajax-promise.html https://blog.revathskumar.com/2016/06/why-i-prefer-ajax-promise.html