Layout Cytoscape Cola布局：如何在不改变位置的情况下重新启动布局？

我正在尝试使用Cytoscape-cola布局来渲染一个图形，在使用该图形时，该图形应该应用一个力导向布局（因此，当拖动节点时，它们应该像有重力一样）。 有关图书馆：

我的第一个问题是，通过

add（node）

将节点添加到图形中不会在cola布局算法中包含它们。我找到的唯一解决方法是销毁布局，重新初始化它，然后重新启动它。但在某些情况下，这会导致节点跳转

我认为这是因为我完全破坏了旧布局，但在设置一个最小的示例时，我意识到即使只调用

layout.stop（）

和

layout.run（）

也会导致节点被重新定位

在下面的示例中，只有一个节点。通过拖放移动节点，然后按下“停止”按钮和“开始”按钮，使节点跳回其初始位置：

document.addEventListener（'DOMContentLoaded'，function（）{
//寄存器cola布局
细胞景观；
var节点=[{data:{id:1，name:1}]
var边缘=[]；
var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[
{
选择器：“节点[名称]”，
风格：{
'内容'：'数据（名称）'
}
},
{
选择器：'边'，
风格：{
“曲线样式”：“bezier”，
“目标箭头形状”：“三角形”
}
},
],
要素：{
节点：节点，
边缘：边缘
}
});
var布局=cy.layout({
名字：“可乐”，
无限：是的，
fit:false，
});
layout.run（）；
document.querySelector（“#start”）.addEventListener（'click'，function（）{
layout.run（）；
});
document.querySelector（“#stop”）.addEventListener（'click'，function（）{
布局。停止（）；
});
document.querySelector（“#添加节点”）.addEventListener（'click'，function（）{
var id=Math.random（）；
add（{group:'nodes'，data:{id:id，name:id}}）；
add（{group:'edges'，data:{source:id，target:u.head（nodes.data.id}}）；
布局。停止（）；
布局。销毁（）；
布局=cy.layout({
名字：“可乐”，
无限：是的，
fit:false，
});
layout.run（）；
});
});
正文{
字体系列：helvetica neue、helvetica、liberation sans、arial、sans serif；
字体大小：14px；
}
#赛义德{
位置：绝对位置；
左：0；
排名：0；
底部：0；
右：0；
z指数：999；
}
h1{
不透明度：0.5；
字号：1em；
字体大小：粗体；
}
#钮扣{
位置：绝对位置；
右：0；
底部：0；
z指数：99999；
}

cytoscape-edgehandles.js无限布局演示
具有无限布局的cytoscape edgehandles演示
开始
停止
添加节点
好吧，事实上你和Stephan非常接近。
问题是WebCola在默认情况下调用
start
时会将节点居中：

WebCola的cytoscape包装器目前不支持此选项，因此我将其分叉并自己添加了此选项：

我会在某个时候打开一个请求

现在，您可以像这样顺利地重新启动布局：

layout.stop（）；
layout.destroy（）；//清理事件侦听器
layout=graph.layout（{name:'cola'，infinite:true，fit:false，centerGraph:false}）；
layout.run（）

这样，节点保持其位置好的，实际上你非常接近@Stephan。
问题是WebCola在默认情况下调用
start
时会将节点居中：

WebCola的cytoscape包装器目前不支持此选项，因此我将其分叉并自己添加了此选项：

我会在某个时候打开一个请求

现在，您可以像这样顺利地重新启动布局：

layout.stop（）；
layout.destroy（）；//清理事件侦听器
layout=graph.layout（{name:'cola'，infinite:true，fit:false，centerGraph:false}）；
layout.run（）

这样，节点保持它们的位置，我想图形只是围绕着你的节点（可能是cy.fit（）和cy.center（））嗨，Stephan，谢谢你的想法。在这个最小的示例中，图形可能看起来只是将节点居中。但在一个有两个集群的示例中，您会看到一个集群保持在原位，而在停止并重新启动布局之前被拖动的集群在重新启动时将跳转：/I我认为该图只是围绕您的节点（可能是cy.fit（）和cy.center（））您好Stephan，感谢您的想法。在这个最小的示例中，图形可能看起来只是将节点居中。但在一个有两个集群的示例中，您会看到一个集群保持在原位，而在停止并重新启动布局之前被拖动的集群将在重新启动时跳转：/