动态添加节点到 Cytoscape

Question

我的公司正在为聊天机器人构建一个图形视图编辑器。我们正在使用Cytoscape和cytoscape-cola扩展来实现这一点。我们面临的问题之一是动态地向图形添加新节点，而不会与图形上的现有节点重叠。

我已经浏览了以前的类似问题(如下所列(，但无济于事：

细胞景观 - 处理锁定的节点我在那里尝试了解决方案，即仅在新添加的节点上应用布局，但它们一直堆叠在屏幕中央。

细胞景观 - 忽略锁定的节点我尝试了这里提到的解决方案，但不管一次性锁定节点，即cy.nodes().lock()或单独，即cy.nodes().forEach(node => node.lock())，锁定的节点仍然保持移动。这里要注意的另外一件有趣的事情是，当单独锁定节点时，无论我是否锁定上面的调用，新添加的节点也会被锁定。

Cytoscape - 动态添加节点而不移动其他节点我也尝试了这个解决方案，但锁定的节点仍然移动并且整个布局发生了变化 - 有时完全改变，有时只是一点点。

法典

这是我目前用来构建图形的方法：

const layoutConfig = {
name: "cola",
handleDisconnected: true,
animate: true,
avoidOverlap: true,
infinite: false,
unconstrIter: 1,
userConstIter: 0,
allConstIter: 1,
ready: e => {
e.cy.fit()
e.cy.center()
}
}
this.graph = Cytoscape({ ... })
this.layout = this.grapg.makeLayout(layoutConfig)
this.layout.run();

这是我用来向图形添加新节点的方法：

const addElements = (elements: ElementSingular | ElementMultiple) => {
this.graph.nodes().forEach(node => {
node.lock();
})
this.graph.add(elements)
this.layout = this.graph.makeLayout(layoutConfig)
this.layout.on("layoutready", () => {
this.nodes().forEach(node => {
node.unlock();
})
})
this.layout.run()
this.graph.nodes().forEach(node => {
node.unlock();
})
}

我想执行以下操作之一：

1. 了解我做错了什么，如果我试图完成的事情是可能的，但我的代码没有实现它
2. 了解为什么我无法完成它，即控制它
的限制

Answer 1

编辑：这是你要找的吗？ https://output.jsbin.com/hokineluwo

编辑：我以前没有看到，但是您也在布局调用后立即unlocking节点，Cola是异步的，运行仅启动该过程。删除该代码并仅使用layoutstop方法。

我记错了，但我认为可乐在layoutready后不断移动元素.从他们的代码：

// trigger layoutready when each node has had its position set at least once

您可以使用一个layoutstop事件(也可以使用cytoscape-cola(。

来自文档(重点是我的(：

布局

就绪 ：当布局为所有 节点(但可能不是最终位置(

布局停止 ：当布局具有 完全完成运行或以其他方式停止运行

我会尝试删除该回调并检查它是否给出了良好的结果。 另外，您应该尝试在此处重现它：http://jsbin.com/fiqugiq

它使其他人(甚至是作者(更容易使用它，看看你是否发现了一个错误。