Question

我正在使用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
  },

}

Cytoscape复合节点插入顺序

3 个答案: