Cytoscape.js动态添加节点而不移动其他节点

Question

我正在开发一个从数据库中获取数据的应用程序，我想将它们显示为图形。

我通过显示他们的邻居（节点和连接链接）来管理节点上的“tap”事件。

问题是，每次我想要显示邻居时，所有图形都会被重新渲染，如果之前移动了一些节点，它们将失去先前的位置。

有没有办法只添加邻居而不影响布局中已存在的节点的位置？

重要的是：约束是所有节点都应该是“可移动的”：图中的节点数量可以很容易地增加，并且我希望能够移动/组织它们而不会在添加新节点时丢失结果（点击一个节点）

我在我的项目中使用可乐布局。

这是我设法添加邻居的方式：

function addNeighbour(node, link) {
    cy.startBatch();
    addNode(link.otherNode.type, link.otherNode.name, link.otherNode.properties);
    cy.add([
      {
        group: 'edges',
        data:
        {
          id: node + ":" + link.type + ":" + link.otherNode.type + ":" + link.otherNode.name,
          source: source,
          target: target,
          type: link.type,
          properties: linkproperties
        }
      }
    ]);
    refreshLayout()
    cy.endBatch();
  }
}

var layoutOpts = {
    name: 'cola',
    refresh: 2,
    edgeLength: 200,
    fit: false
}

function refreshLayout() {
    layout.stop();
    layout = cy.elements().makeLayout(layoutOpts);
    layout.run();
}

提前致谢

Answer 1

（1）您可以通过nodes.lock()锁定节点以使其位置不可变。

（2）您可以通过eles.layout()在图形的子集上运行布局以排除某些元素。

这些策略中的任何一种都可以使用，或者它们可以串联使用。

对于你的情况，听起来你应该使用（1）。

• 锁定现有节点。
• 添加新节点。
• 在整个图表上运行Cola。
• 完成Cola后，释放锁定的节点。

但是，请注意，这并不总能产生良好的效果。你可以过度约束系统。如果你想要一个好的布局结果，最好是在没有锁定的情况下在所有东西上运行布局，正如Stephan T.建议的那样。