Javascript 如何在使用cytoscape.js展开和折叠组时保持以前的位置

很长一段时间以来，我一直在寻找一个好的拓扑布局javascript库。我在图书馆学了很多东西，等等，最后我被深深地吸引住了 还有它惊人的延伸

我想要的是一个javascript布局库，它可以用很多节点进行合理的布局。父节点包含子节点，换句话说，节点之间存在继承关系

这几乎是我所需要的。扩展和折叠功能非常棒

我在上面的演示的基础上创建了我的演示。但是，当展开一个节点然后折叠该节点时，图形上的所有节点都会发生更改

初始图

第一次展开和折叠节点后的状态

第二次展开和折叠节点后的状态

显然那不是我需要的。我再次学习了原始的官方演示。我发现demo的

元素

值在每个数据上都有

位置

{"data":{"id":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":577.5410894097904,"y":612.5647477282114},"group":"nodes"}

我知道如果每个数据都有合理的坐标，在展开和折叠一些节点后，所有节点的位置都不会改变

关键是我不知道坐标，也不能为节点设置初始坐标。我认为布局的核心算法是为每个点计算适当的坐标点

所以，我不能为所有节点设置初始坐标，我希望所有节点的位置都是固定的，无论展开和合并任何节点。可能吗

下面是我的演示

document.addEventListener（'DOMContentLoaded'，function（）{
var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
就绪：函数（）{
var api=this.expandCollapse({
排班人：{
名称：“cose bilkent”，
动画：“结束”，
随机化：错误，
拟合：假
},
鱼眼：没错，
动画：假，
可撤销：错误
});
api.collapseAll（）；
},
风格：[{
选择器：'节点'，
风格：{
'标签'：'数据（id）'
}
}],
要素：[{
“组”：“节点”，
“数据”：{
“id”：“n_0”，
“名称”：“外部网络”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“n_4”，
“名称”：虚拟机网络",
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“n_3”，
“名称”：“虚拟机网络2”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_128”，
“名称”：“bfcui pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_105”，
“名称”：“bychen pc”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_93”，
“名称”：“CE bj”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_100”，
“名称”：“长流pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_67”，
“名称”：“超马电脑”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_83”，
“姓名”：“陈旺”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_68”，
“名称”：“cwang pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_15”，
“名称”：“gqpei bj”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_1”，
“名称”：“gwxu pc”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_118”，
“名称”：“gyzhao pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_76”，
“名称”：“hlli pc”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_18”，
“名称”：“hwzhang pc”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_40”，
“名称”：“hxqu pc”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_69”，
“名称”：“hxwang pc”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_71”，
“名称”：“jbshi pc”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_64”，
“名称”：“jdai pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_16”，
“名称”：“jfxiao bj”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_78”，
“名称”：“JHOU pc”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_91”，
“名称”：“jjsun pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_17”，
“名称”：“jppan bj”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_45”，
“名称”：“jqwang pc”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_50”，
“名称”：“jxli pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_42”，
“名称”：“jyyou pc”，
“父项”：“组1”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_28”，
“名称”：“jyzhou pc”，
“父项”：“组2”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_46”，
“名称”：“jzhao pc”，
“父项”：“组0”
}
}, {
“组”：“节点”，
“数据”：{
“id”：“v_19”，
“名称”：“乐丰电脑”，
var nodes = cy.nodes();
var positions = [];
for (node in nodes) {
    positions[node] = nodes[node].position(); // save the i'th nodes positions
}

var nodes = cy.nodes();
for (node in nodes) {
    nodes[node].position(positions[node]); // set x and y of node
}

cy.nodes().on("expandcollapse.beforecollapse", function(event) { var node = this; ... }) // Triggered before a node is collapsed

cy.nodes().on("expandcollapse.aftercollapse", function(event) { var node = this; ... }) // Triggered after a node is collapsed

cy.nodes().on("expandcollapse.beforeexpand", function(event) { var node = this; ... }) // Triggered before a node is expanded

cy.nodes().on("expandcollapse.afterexpand", function(event) { var node = this; ... }) // Triggered after a node is expanded

var beforeExpand = null;
cy.unbind('expandcollapse.beforeexpand');
cy.nodes().bind('expandcollapse.beforeexpand', function(event) { 
   if (beforeExpand == null) 
      beforeExpand = cy.elements().clone();  // save the graph before the first expand
}); // Triggered before a node is expanded

cy.unbind('expandcollapse.aftercollapse');
cy.nodes().bind('expandcollapse.aftercollapse', function(event) { 
   if(beforeExpand != null) {
       cy.elements().remove();
       cy.add(beforeExpand);  // set the graph to original values
       beforeExpand = null;
   }
}); // Triggered before a node is expanded