Javascript 将d3圆移离中心圆-强制布局

我正在用d3来表示圆中的节点，当一个圆的大小改变时，它们周围的圆应该从一个因重叠而改变大小的圆上移开

考虑上面的红色圆圈，当它的大小发生变化时，其他圆圈应该朝绿色箭头的方向移动。我尝试了力量模拟，但我无法实现它，并添加了下面的代码，我不确定我做错了什么，有人能帮忙吗

var w=900，
h=500；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
风险值数据={
名称：“根”，
儿童：[{
标签：“红色1”，
尺码：20，
颜色：“红色”
},{
标签：“RAD2”，
尺码：20，
颜色：“#c99700”
}, {
标签：“BIL3”，
尺码：20，
颜色：“#008ce6”
}, {
标签：“EEN4”，
尺寸：10，
颜色：“#007377”
}, {
标签：“INO5”，
尺码：40，
颜色：“#b4975a”
},{
标签：“RAD6”，
尺码：40，
颜色：“#c99700”
},{
标签：'BIL7'，
尺码：30，
颜色：“#008ce6”
},  {
标签：“INO8”，
尺码：30，
颜色：“#b4975a”
},{
标签：“INO9”，
尺码：40，
颜色：“#b4975a”
},{
标签：“RAD10”，
尺码：40，
颜色：“#c99700”
},{
标签：'BIL11'，
尺码：30，
颜色：“#008ce6”
},  {
标签：“INO12”，
尺码：30，
颜色：“#b4975a”
} ]
};
var add=函数（）{
data.children[0].size=80；
render（）；
}
var reset=函数（）{
data.children[0]。大小=20；
render（）；
}
var render=function（）{
var模拟=d3.forceSimulation（data.children）
.力（“x”，d3.力x（w/2））
.力（“y”，d3.力（h/2））
.力（“碰撞”，d3.力碰撞（功能（d）{
返回d.size+20
}))
.停止（）；
对于（var i=0；i<100；++i）模拟；
console.log（数据）
让nodeLevel1=svg.selectAll（'circle'）
.数据（数据.子项，（d）=>{
//附加唯一性键
控制台日志（d）
返回d.标签；
});
nodeLevel1.exit（）.remove（）；
设nodeLevel1Enter=nodeLevel1
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
.attr（“r”，函数（d）{
返回d.size
})
.样式（“填充”，功能（d）{
返回d.color；
})
nodeLevel1Enter=nodeLevel1Enter
.merge（nodeLevel1）
让level1CirclesUpdate=NodeLevel1Center
//.selectAll（'圆圈'）
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
.attr（“r”，函数（d）{
返回d.size
})
.样式（“填充”，功能（d）{
返回d.color；
})
}
d3.选择（'updatesize'）。在（'click'，function（）上{
添加（）；
})
d3.选择（'resetsize'）。在（'click'，function（）上{
重置（）；
})
render（）

| 
对于答案，代码在这里更新jsfiddle.net/gx8q6ybd/39
对于答案，代码在这里更新jsfiddle.net/gx8q6ybd/39
我不是在回答你的问题：没有圆圈重叠，正在使用正确的半径更新碰撞。@GerardoFurtado是的，这些圆没有重叠，但当一个圆的大小增加时，它们周围的其他圆没有以相同的程度移动。在上面的例子中，当红色圆圈的大小增加时，圆圈以不同的程度移动。不同的程度是什么？力只是根据你在代码中指定的
d.size+20
移动它们。@GerardoFurtado当中间圆的大小增加时，其他圆随机放置在该圆周围，其他圆的位置从一个点跳到另一个点，当有很多圆时，很难跟踪。这些圆从中心点开始沿直线消失。它们再次随机放置，原因很简单：每次都要创建一个新的模拟。只需更改现有的模拟，不要创建新的模拟。我不是在回答你的问题：没有圆重叠，碰撞将以正确的半径更新。@GerardoFurtado是的，这些圆没有重叠，但当圆的大小增加时，它们周围的其他圆不会以相同的程度移动。在上面的例子中，当红色圆圈的大小增加时，圆圈以不同的程度移动。不同的程度是什么？力只是根据你在代码中指定的
d.size+20
移动它们。@GerardoFurtado当中间圆的大小增加时，其他圆随机放置在该圆周围，其他圆的位置从一个点跳到另一个点，当有很多圆时，很难跟踪。这些圆从中心点开始沿直线消失。它们再次随机放置，原因很简单：每次都要创建一个新的模拟。只需更改现有的模拟，不要创建新的模拟。