dagre布局绘制所有节点时使用cy.add

Question

所有的拳头，让我解释我的问题： 我使用cytoscape绘制基于信息位于MySQL数据库中的网络，使用Ajax的信息是从PHP文件传递给脚本，如果我用一个布局像“圈”一切顺利，但我需要绘制树是可读的，所以我已经决定使用“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功能创建的节点图像中的问题，都在同一个位置，而人工添加的节点都OK。

displayed image

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

我想获得这个结果自绘制图表以来，有什么建议？

Answer 1

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

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