Cytsocape.js не может создавать ребра в цикле for - PullRequest
Новая
       42

Cytsocape.js не может создавать ребра в цикле for

0 голосов
/ 15 ноября 2018

Я создаю диаграмму с узлами и ребрами. После того, как я создал узлы, я не могу создать связанные ребра, не получив таких ошибок:

Невозможно создать ребро 5134fb65-b30f-4947-9870-cc909e293e21 с несуществующим источником Peter

Мой код: 

var myJSONdata = info;
var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(id)',
        'text-opacity': 0.5,
        'text-valign': 'center',
        'text-halign': 'right',
        'shape': 'hexagon',
        'label': 'data(label)',
        'background-color': '#11479e'
      }
    },
    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'width': 4,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea'
      }
    }
  ],

  // elements: {
  //   nodes: [
  //     { data: { id: 'Peter' } },
  //     { data: { id: 'Claire' } },
  //     { data: { id: 'Mike' } },
  //     { data: { id: 'Rosa' } }
  //   ],
  //   edges: [
  //     { data: { source: 'Peter', target: 'Claire' } },
  //     { data: { source: 'Claire', target: 'Mike' } },
  //     { data: { source: 'Mike', target: 'Rosa' } }
  //   ]
  // }
});

var array = [];
// Create nodes
for (var i = 0; i <= myJSONdata.length - 1; i++) {
  array.push({
        group: 'nodes',
        data: { 
          id: i,
          label: myJSONdata[i].name
        }
      }
  );
}
// Create edges
for (var i = 0; i <= myJSONdata.length - 1; i++) {
  var source = myJSONdata[i].name;
  array.push({
      group: 'edges',
      data: {
          source: source,
          target: myJSONdata[i].next_op_name
      }
  });
}

cy.add(array);

cy.layout({
    name: 'circle'
}).run();

Часть "Создать узлы" работает, а "Создать ребра" - нет.

Я попробовал решение здесь , но оно не работает.

На самом деле я хочу прочитать данные из файла JSON, чтобы создать диаграмму. Я могу сделать это с: 

 elements: {
    nodes: [
      { data: { id: 'Peter' } },
      { data: { id: 'Claire' } },
      { data: { id: 'Mike' } },
      { data: { id: 'Rosa' } }
    ],
    edges: [
      { data: { source: 'Peter', target: 'Claire' } },
      { data: { source: 'Claire', target: 'Mike' } },
      { data: { source: 'Mike', target: 'Rosa' } }
    ]
  }

Но я хочу автоматизировать его в соответствии с файлом JSON на входе.

Это мой JSON-файл: 

info = [
    {
        "name": "Peter",
        "next_op_name": "Claire",
    }, {
        "name": "Claire",
        "next_op_name": "Mike",
    }, {
        "name": "Mike",
        "next_op_name": "Rosa",
    }, {
        "name": "Rosa",
        "next_op_name": "Peter",
    }
];

Я не могу понять, что не так.

1 Ответ

0 голосов
/ 15 ноября 2018

Поля source и target в ребре - это идентификаторы узлов, а не метки.

При создании узлов вам также необходимо установить id в myJSONdata[i].name.

...