Javascript 打开组后的新布局不是基于cola.js的上一个布局

我最近了解了一个优秀的JS库cola.JS。它可以做一个部队布局和支援小组。在此处了解更多信息：

我创建了一个简单的演示，以显示具有开放组功能的force布局。但我对开放的行为感到困惑

我认为当打开一个组时，新的布局应该是在上一个布局的基础上进行一些小的调整。但现在它会重新部署所有节点。为什么?

我从这个链接中学到了一些理念：，看起来很复杂。动态添加到图形中的新节点的坐标应设置为打开组的坐标。不幸的是，它也不能解决我的问题

以下是我的演示：

var w=480，h=420，cola；
风险值数据={
“节点”：[
{“名称”：“顶部”，“宽度”：60，“高度”：60}，
{“名称”：“A”，“宽度”：60，“高度”：60}，
{“名称”：“B”，“宽度”：60，“高度”：60}，
{“名称”：“C”，“宽度”：60，“高度”：60}，
{“名称”：“D”，“宽度”：60，“高度”：60}，
{“名称”：“E”，“宽度”：60，“高度”：60}，
{“名称”：“F”，“宽度”：60，“高度”：60}，
{“名称”：“G”，“宽度”：60，“高度”：60}，
{“名称”：“H”，“宽度”：60，“高度”：60}，
{“名称”：“I”，“宽度”：60，“高度”：60}
],
“链接”：[
{“源”：0，“目标”：6}，
{“源”：0，“目标”：4}，
{“源”：0，“目标”：3}，
{“源”：0，“目标”：7}，
{“源”：0，“目标”：8}，
{“源”：6，“目标”：0}，
{“源”：6，“目标”：7}，
{“源”：4，“目标”：0}，
{“源”：4，“目标”：3}，
{“源”：3，“目标”：0}，
{“源”：3，“目标”：4}，
{“源”：7，“目标”：0}，
{“源”：7，“目标”：6}，
{“源”：7，“目标”：4}，
{“源”：8，“目标”：0}，
{“源”：8，“目标”：7}
],
“团体”：[
{“叶”：[0,1,2]，“组”：[1]，“名称”：“产品”}，
{“leaves”：[7]，“name”：“business”}，
{“leaves”：[3,4,6,8,9]，“name”：“Tech”}
]
};
cola=cola.d3适配器（）
.linkDistance（150）
.avoidOverlaps（真实）
.handleDisconnected（正确）
.尺寸（[w，h]）；
svg=d3。选择（“正文”）。追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.on（“dblclick.zoom”，null）；
append（'rect'）
.attr（“宽度”，w）
.attr（“高度”，h）
.style（“填充”、“无”）
.style（“指针事件”、“全部”）；
svg=svg.append（'g'）；
更新（数据）；
cola.on（“勾号”，函数（）{
svg.selectAll（“.link”）
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
selectAll（“.nodeimage”）.attr（“x”，函数（d）{return d.x-25/2}）.attr（“y”，函数（d）{return d.y-25/2}）；
svg.selectAll（“.group”）
.attr（“x”，函数（d）{返回d.bounds.x；}）
.attr（“y”，函数（d）{返回d.bounds.y；}）
.attr（“宽度”，函数（d）{返回d.bounds.width（）；}）
.attr（“height”，函数（d）{返回d.bounds.height（）；}）；
svg.selectAll（“.label”）.attr（“x”，函数（d）{
var w=this.getBBox（）.width；
返回d.x-w/2；
})
.attr（“y”，函数（d）{
var h=this.getBBox（）.height；
返回d.y+25；
});
svg.selectAll（“.groupclosebutton”）
.attr（“x”，函数（d）{返回d.bounds.x+d.bounds.width（）-20；}）
.attr（“y”，函数（d）{返回d.bounds.y+2；}）；
svg.selectAll（“.groupname”）
.attr（“x”，函数（d）{返回d.bounds.x+5；}）
.attr（“y”，函数（d）{返回d.bounds.y+15；}）；
});
功能更新（数据）{
//forEach（函数（g）{g.padding=15；}）；
cola.nodes（data.nodes）.links（data.links）.groups（data.groups.start（）；
变量颜色=['#d3d4e5'、'#f7e0c8'、'#dee8f2'、'#cbe5c4'、'#ededeb']；
var group=svg.selectAll（“.group”）.data（data.groups，函数（d）{return d.name；}）；
group.enter（）.append（“rect”）/，“：last child”
.attr（“rx”，8）.attr（“ry”，8）
.attr（“类”、“组”）
.style（“fill”，函数（d，i）{返回颜色[i%5]；}）
.呼叫（可乐.拖）；
group.exit（）.remove（）；
var groupName=svg.selectAll（“.groupName”）.data（data.groups，函数（d）{return d.name；}）；
groupName.enter（）.append（“文本”）
.attr（“类”、“组名”）
.attr（“宽度”，“40px”）
.attr（“高度”，“13px”）
.text（函数（d）{返回d.name；}）；
groupName.exit（）.remove（）；
var link=svg.selectAll（“.link”）.data（data.links，函数（d）{return d.source.name+'-'+d.target.name；}）；
link.enter（）.append（“line”）.attr（“class”，“link”）.style（“stroke”，“rgb（168，168，168）”）；
link.exit（）.remove（）；
var nodes=svg.selectAll（'.nodeimage'）.data（data.nodes，函数（d）{return d.name；}）；
nodes.enter（）.append（'svg:image'）
.attr（“类”、“节点年龄”）
.呼叫（可乐.拖动）
.attr（“xlink:href”，函数（d）{
变量img=”http://icons.iconarchive.com/icons/hopstarter/sleek-xp-basic/24/Folder-icon.png";
返回img；
})
.attr（'temp'，函数（d）{
var self=d3.选择（此项）；
自身属性（“宽度”，25）；
自身属性（“高度”，25）；
})
.on（“dblclick”，函数（节点、索引、选择）{
d3.event.preventDefault（）；
开放组（节点）；
});
nodes.exit（）.transition（）.attr（“宽度”，0）.attr（“宽度”，0）.remove（）；
var label=svg.selectAll（“.label”）.data（data.nodes，函数（d）{return d.name；}）；
label.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.attr（“宽度”、“40”）
.attr（“高度”，15）
.text（函数（d）{返回d.name；}）
.呼叫（可乐.拖）；
label.exit（）.remove（）；
}
函数openGroup（节点）{
变量i，j，flag，maxnodes=3，groupDeletedIndex=-1；
//删除节点
对于（i=0；i=0；i--）{
if（this.data.links[i].source.name==node.name
||this.data.links[i].target.name==node.name）{
本.数据.链接.拼接（i，1）；
}
}
//删除节点的关系
flag=false；
对于（i=0；i