dagre 布局在使用 cy.add 时将所有节点绘制在同一位置

Question

首先，让我解释一下我的问题：我正在使用 cytoscape 根据位于 MySQL 数据库中的信息绘制网络，使用 Ajax 信息从 PHP 文档传递到脚本，如果我使用像这样的布局"circle" 一切顺利，但我需要绘制树以便于阅读，所以我决定使用 "dagre" 这是代码：

$.ajax({
        type: "POST",
        url:"dispositivos.php",
        async: true,
        success:  function(datos){
            var dataJson = eval(datos);
            dibujanodos(dataJson);
          },
        error: function (obj, error, objError){
            //avisar que ocurrió un error
        }

});

$.ajax({
    type: "POST",
    url:"relaciones.php",
    async: true,
    success:  function(datosdos){
        var dataJsondos = eval(datosdos);
        dibujarlineas(dataJsondos);
      },
    error: function (obj, error, objError){
        //avisar que ocurrió un error
    }

});

var cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  layout: {
    name: 'dagre'
  },

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(id)',
        'text-opacity': 0.5,
        'text-valign': 'center',
        'text-halign': 'right',
        'background-color': '#11479e'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 4,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea'
      }
    }
  ],

  elements: {
    nodes: [

      //for (var i = 0; i < Object.keys(datos).length; i++) {
        //      data: { id: datos[i].sn,
          //            etiqueta: "IP: " + datos[i].ip_adress + " Device id: " + datos[i].device_id}
          //    }

        { data: { id: 'n15' } },
        { data: { id: 'n14' } },
        { data: { id: 'n13' } },
        { data: { id: 'n12' } },
        { data: { id: 'n11' } },
    ],
    edges: [
      { data: { source: 'n0', target: 'n1' } },
      { data: { source: 'n1', target: 'n2' } },
      { data: { source: 'n1', target: 'n3' } },
      { data: { source: 'n4', target: 'n5' } },
      { data: { source: 'n4', target: 'n6' } },
      { data: { source: 'n6', target: 'n7' } },
      { data: { source: 'n6', target: 'n8' } },
      { data: { source: 'n8', target: 'n9' } },
      { data: { source: 'n8', target: 'n10' } },
      { data: { source: 'n11', target: 'n12' } },
      { data: { source: 'n12', target: 'n13' } },
      { data: { source: 'n13', target: 'n14' } },
      { data: { source: 'n13', target: 'n15' } },
    ]
  },
});

function dibujanodos(datos){

 for (var i = 0; i < Object.keys(datos).length; i++) {
     cy.add({
         data: { id: datos[i].sn,}
       });
   }
}


function dibujarlineas (datosdos){

  for (var i = 0; i < Object.keys(datosdos).length; i++) {
  var source = datosdos[i].Device_SN_O;
cy.add({
  data: {
      id: datosdos[i].Device_SN_O + datosdos[i].Device_SN_D,
      source: source,
      target: datosdos[i].Device_SN_D,
      etiquetaedge: datosdos[i].Port_ID,
  }
});
}
}

在这段代码中，我留下了一些手动添加的节点，以便您可以看到问题，在下图中，使用 cy.add 函数创建的节点都在相同的位置，而手动添加的节点还好。

displayed image

即使所有的边和节点的 id 都是正确的，它看起来不像一棵树，一旦我展开节点它看起来像这样： expected result

图表绘制后我想得到这个结果，有什么建议吗？

Answer 1

添加新节点后，运行重新布局

var layout = cy.makeLayout({ name: 'dagre' });
layout.run();

dagre 布局在使用 cy.add 时将所有节点绘制在同一位置

dagre layout draw all nodes in same position when using cy.add

javascript

ajax

tree

cytoscape.js