Cytoscape复合节点的插入顺序

Question

我正在使用cytoscape（可乐布局）和动态（插入/删除）复合节点，我遇到了父节点无法正确显示的问题。我意识到需要在子节点之前插入父节点，但我想知道是否有更简单的方法来执行此操作，因为每次插入新节点时我都需要查看现有节点列表并求助它们确保父节点在孩子面前添加。

有没有办法设置cytoscape来工作，所以我们不必排序节点？ （1-节点插入，2-平局布局）？

谢谢你的帮助

Answer 1

只需在一个操作中添加元素，而不是多个操作。

cy.add(manyEles);

与

cy.add(ele1);
cy.add(ele2);
// ...
cy.add(eleN);

Answer 2

好的，这是更新/加载数据的代码：

updateGraphData(data){
    if(data){
        this.cy.$('*').remove()
        this.cy.add(data)
//      this.cy.json({elements: data})
    }
    this.cy.makeLayout(ColaConfig.layout).run()
    this.cy.resize()
    this.cy.zoom(1)
    this.cy.center()
}

这是数据中的内容：

[  
   {  
      "data":{  
         "id":"b0489a7f-1794-3053-6bb5-f4fa5adcc129",
         "label":"Kid A",
         "conceptType":"Enfant",
         "parent":"415f5871-9312-5857-99bc-8a523283ebd9",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Enfant"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   },
   {  
      "data":{  
         "id":"06e76ece-edee-5a55-1492-f4e22b5685d9",
         "label":"Kid B",
         "conceptType":"Enfant",
         "parent":"415f5871-9312-5857-99bc-8a523283ebd9",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Enfant"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   },
   {  
      "data":{  
         "id":"6e65d053-a124-fc44-72b7-8563ee4ca63f",
         "label":"Kid C",
         "conceptType":"Enfant",
         "parent":"415f5871-9312-5857-99bc-8a523283ebd9",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Enfant"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"orphan",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   }
]

What I get :

What I get when I sort the nodes in my JSON (What I need)

Answer 3

这可能会有所帮助（colaConfig）

export default {
  boxSelectionEnabled: true,
  autounselectify: false,
  userZoomingEnabled: false,
  minZoom: 0.3,
  maxZoom: 1.5,
  wheelSensitivity: 0.1,

  layout: {
    name: 'cola',
    directed: false,
    fit: false, // on every layout reposition of nodes, fit the viewport
    animate: true, // whether to show the layout as it's running
    boundingBox: { x1:0, y1:0, w:0, h:0 },
    maxSimulationTime: 4000, // max length in ms to run the layout
    avoidOverlap: true, // if true, prevents overlap of node bounding boxes
    convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
    nodeDimensionsIncludeLabels: false,
//    nodeSpacing: 40,//function( edge ) { return edge.data('label').length * 5.5},
    infinite: false,
    refresh: 3, // number of ticks per frame; higher is faster but more jerky
  },

}