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函数创建的节点都处于相同的位置，而手动添加的节点是可以的。< / p>

displayed image

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

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

Answer 1

添加新节点后，再次运行布局

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

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

1 个答案: