Cytsocape.js не может создать границу с несуществующей целью

Я пытаюсь создать ребро после того, как создал узлы с помощью запроса 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" } }
]);

Что я делаю неправильно?


javascript jquery cytoscape cytoscape.js
person user8980530    schedule 11.05.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Лично я не добавляю узлы и ребра по отдельности, вы можете использовать массив для сохранения узлов и ребер, которые хотите добавить, а затем вызвать 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 (), чтобы дождаться фактического добавления узлов, иначе может случиться так, что идентификатор не может быть найден:

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

Изменить: вы вызываете cy.add () для краев внутри или вне вызова ajax? Ajax - это асинхронный вызов функции, поэтому весь код после вызова вне функции успеха, вероятно, будет выполнен до того, как вы сможете выполнить то, что написали успешно. Если вы хотите, вы можете подождать, пока он завершится, и поместить второй cy.add () для краев в обработчик обещаний, как здесь:

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

person Stephan T.    schedule 11.05.2018
comment
Спасибо! Асинхронность была проблемой. Не знаю, как я об этом не подумал. - person user8980530; 11.05.2018
comment
Рад, что смог помочь :) - person Stephan T.; 11.05.2018