D3.js 使用forceSimulation更新气泡图而不更改旧气泡的位置

我想实现一个随时间动态变化的气泡图，就像使用D3.js v5一样

如果运行以下代码并移动滑动条，您将发现上一步中出现的气泡的位置正在改变，这使得步骤之间的转换“跳跃”

如何尽可能多地保留上一步中出现的气泡的位置，并仅更新其气泡大小

换句话说，给定一系列键/值对，如何使用

forceSimulation

更新这些对，而不让它们相互碰撞，同时保留在上一时间步中已出现的键的x、y位置

var数据=[
[{文本：“a”，大小：500}，{文本：“b”，大小：300}，{文本：“c”，大小：150}，{文本：“d”，大小：100}，{文本：“e”，大小：200}]，
[{text:“a”，大小：400}，{text:“b”，大小：200}，{text:“c”，大小：100}，{text:“x”，大小：300}，{text:“y”，大小：300}]，
[{text:“a”，大小：200}，{text:“b”，大小：100}，{text:“x”，大小：300}，{text:“y”，大小：350}，{text:“z”，大小：200}]，
[{文本：“a”，大小：500}，{文本：“b”，大小：300}，{文本：“c”，大小：150}，{文本：“d”，大小：100}，{文本：“e”，大小：200}]，
[{文本：“a”，大小：400}，{文本：“b”，大小：200}，{文本：“c”，大小：100}，{文本：“x”，大小：300}，{文本：“y”，大小：300}]
]
变量工具提示=d3。选择（“主体”）
.附加（“div”）
.style（“位置”、“绝对”）
.风格（“z指数”、“10”）
.style（“可见性”、“隐藏”）
.风格（“颜色”、“白色”）
.style（“填充”、“8px”）
.style（“背景色”、“rgba（0,0,0,0.75）”）
.样式（“边界半径”、“6px”）
.style（“字体”，“14px无衬线”）
.文本（“工具提示”）；
可变宽度=300，
高度=300，
颜色=d3.scaleOrdinal（d3.schemePastel1）
var svg=d3。选择（“图表”）
.append（“svg”）
.attr（“高度”，高度）
.attr（“宽度”，宽度）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
var circles=svg.selectAll（“.node”）；
var text=svg.selectAll（“.text”）；
var radiusScale=d3.scaleSqrt（）.domain（[100400]）.range（[10,40]）
变量滑块=d3。选择（“滑块”）
.append（“输入”）
.attr（“类”、“滑块”）
.attr（“类型”、“范围”）
.attr（“最小”，0）
.attr（“最大”，data.length-1）
.attr（“值”，0）
.attr（“样式”，“宽度：300px”）
.关于（“变更”，功能（d）{
更新（数据[this.value]）；
})
var simulation=d3.forceSimulation（）
.force（“x”，d3.forceX（））
.force（“y”，d3.forceY（））
.力（“碰撞”，d3.力碰撞（功能（d）{
返回半径刻度（d.size）+1；
}))
.on（'勾选'，勾选）
//初始更新
更新（数据[0]）
功能更新（数据）{
var t=d3.transition（）
.期限（750）；
//转圈
//加入
圆=圆。数据（数据，函数（d）{
返回d.text
})
//出口
circles.exit（）.remove（）
//进入
圆圈=圆圈
.enter（）.append（“圆”）
.合并（圆）
圈子
.过渡（t）
.attr（“类”、“节点”）
.attr（“r”，函数（d）{
返回半径刻度（d尺寸）
})
.样式（“填充”，功能（d）{
返回颜色（（d.text[0].charCodeAt（））
})
圈子
.on（“鼠标悬停”，功能（d）{
html（“单词：+d.text+”
频率：+d.size）
工具提示.样式（“可见性”、“可见”）
})
.on（“mousemove”，function（）{
返回工具提示
.style（“顶部”（d3.event.pageY-10）+“px”）
.style（“左”（d3.event.pageX+10）+“px”）
})
.on（“mouseout”，函数（）{
返回工具提示样式（“可见性”、“隐藏”）；
})
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
//文本
//加入
文本=文本。数据（数据，函数（d）{
返回d.text
})
//出口
text.exit（）.remove（）
//进入
文本=文本
.enter（）.append（“文本”）
.合并（文本）
文本
.过渡（t）
.attr（“类”、“文本”）
.文本（功能（d）{
返回d.text
})
模拟.节点（数据）
simulation.alpha（1.restart（）；
}
函数勾选（）{
圈子
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
文本
.attr（“x”，函数（d）{
返回d.x
})
.attr（“y”，函数（d）{
返回d.y
})
}
//使圆圈可拖动
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
工具提示。样式（“可见性”、“隐藏”）；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}

.node:悬停{
行程：#000；
笔画宽度：2px；
不透明度：.7；
}