Cytoscape布局-处理锁定的节点

Question

我正在使用vue-cytoscape渲染图形并浏览树状数据结构。

我的目标是扩展父节点并使其在图中保持位置。我只想添加新的子节点。

我的方法是锁定当前节点，添加子节点并解锁节点。

this.cy.nodes().lock()
for(let d of data){
  this.cy.add(d)
}
this.cy.elements().layout(this.config.layout).run()
setTimeout(() => {this.cy.nodes().unlock()}, 2000) // Give some time for the layout to render before unlocking nodes.

问题在于布局不考虑节点的锁定状态。只移动新节点，这很好。但是布局不被尊重。我的印象是，布局会为所有节点计算一个新位置，但随后只会移动未锁定的节点。

根据此GitHub issue，某些布局算法应处理锁定的节点。我正在使用以下布局，而且似乎都没有考虑锁定节点。

• 可乐
• Fcose
• Dagre
• avsdf
• 网格
• 同心

Answer 1

请尝试仅在添加的节点上调用布局函数：

var eles = cy.add(data);   // refer to http://js.cytoscape.org/#cy.add for adding nodes
eles.layout(this.config.layout).run();

如果在调用布局函数时不希望节点移动，则可以将它们从渲染中排除。在调用cy.add（）时，该函数将返回一个对象，其中包含每个添加的元素（请参见代码中的var eles = ...）。