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

Question

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

我通过显示节点的邻居(节点和连接链接)来管理节点上的“点击”事件。

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

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

重要:约束是所有节点都应该是“可移动的”:图中的节点数量可以很容易地增加，我希望能够移动/组织它们添加新结果时不会丢失结果(通过单击节点)

我在我的项目中使用 cola-layout。

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

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. 建议的那样。