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

Question

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

我的代码：

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结果：

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

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" } }
]);

我做错了什么？

Answer 1

就个人而言，我没有单独添加节点和边缘，您可以使用数组来保存要添加的节点和边，然后调用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是一个异步函数调用，因此在成功函数之外调用之后的所有代码可能会在您执行成功编写之前执行。如果你想要你可以等待它的乐趣，并把第二个cy.add（）放在一个承诺处理程序的边缘，如下所示：

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