Javascript 将气泡图升级到v4+；使用重力/碰撞检测/效果

我有一个d3v4气泡图，但在d3v3中有很多类似重力/电荷和碰撞检测的功能。当图表加载时——我想看到气泡的一致/运动，就像看着青蛙在池塘里产卵一样——它们通过重力彼此靠近——但具有排斥/电荷类型的属性。泡沫还需要尽量远离边缘

我在v3中寻找的是：

$（文档）.ready（函数（）{
var$this=$（'.bubblechart'）；
//console.log（“呈现的div现在使用d3”，此为$this）；
//设置el高度和宽度等。
var w=$this.data（“宽度”）；
var h=$this.data（“高度”）；
风险值数据=[{
“标签”：“中文”，
“价值”：20
}, {
“标签”：“美国”，
“价值”：10
}, {
“标签”：“印度”，
“价值”：50
}];
函数colors_google（n）{
var colores_g=[“#ff7276”、“#4baad2”、“#eaa2a5”、“#e75763”、“#a6a19e”]；
返回颜色[n%颜色长度]；
}
var方法={
el:“，
初始化：函数（el，选项）{
变量克隆=选项[“数据”]；
var=这个；
//console.log（“克隆”，clone）；
w=选项[“宽度”]；
h=选项[“高度”]；
方法：el=el；
方法：设置（克隆，w，h）；
//方法.大小图（methods.el[“选择器]）；
},
resizeChart:函数（选择器）{
//警报（选择器）；
var svg=$（选择器+“.bubblechart”）；
var aspect=svg.width（）/svg.height（）；
var targetWidth=svg.parent（）.parent（）.width（）；
if（targetWidth！=null）{
svg.attr（“宽度”，targetWidth）；
attr（“height”，Math.round（targetWidth/aspect））；
}
},
漏斗数据：功能（数据、宽度、高度）{
函数getRandom（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
var max_amount=d3.max（数据，函数（d）{
返回parseInt（d.value）
})
var radius_scale=d3.scale.pow（）.指数（0.5）.域（[0，max_amount]）.范围（[2，85]）
$.each（数据、函数（索引、元素）{
元素半径=半径×刻度（元素值）*.8；
elem.all=‘all’；
元素x=getRandom（0，宽度）；
元素y=getRandom（0，高度）；
});
返回数据；
},
getMargin:function（）{
返回{
前30名，
右:25,，
底数：50，
左：25
};
},
设置：功能（数据、w、h）{
方法：宽度=w；
方法：高度=h；
methods.fill=d3.scale.ordinal（）
.范围（[“#d84b2a”、“#beccae”、“#7aa25c”、“#008000”]）
var margin=methods.getMargin（）；
var选择器=methods.el；
var=50；
/*
var svg=d3.选择（选择器）
.append（“svg”）
.attr（“类”、“泡泡糖”）
.attr（“宽度”，parseInt（w+margin.left+margin.right，10））
.attr（“高度”，parseInt（h+margin.top+margin.bottom，10））
.attr（'viewBox'，“0 0”+parseInt（w+margin.left+margin.right，10）+“+parseInt（h+margin.top+margin.bottom，10））
.attr（'perserveAspectRatio'，“xMinYMid”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
*/
var chart=d3.select（选择器）.append（“svg:svg”）
.attr（“类别”、“图表”）
.attr（“宽度”，w-（w/5））
.attr（“高度”，h）
.attr（“保留Aspectratio”、“无”）
.attr（“视图框”、“0”+（w-（w/5））+“”+h+“”）
.append（“svg:g”）
.attr（“类”、“泡泡糖”）
.attr（“转换”、“翻译（-10,0）”）；
methods.force=d3.layout.force（）
.收费（100）
.重力（1200）
.size（[methods.width，methods.height]）
var bubbleholder=图表追加（“g”）
.attr（“类别”、“气泡持有人”）
var bubbles=bubbleholder.append（“g”）
.attr（“类”、“气泡”）
var labelubble=bubbleholder.append（“g”）
.attr（“类”、“标签气泡”）
//添加图例
var Legendpattingtop=30；
var legend=d3.select（$this[0]）.append（“svg:svg”）
.attr（“类”、“图例”）
.attr（“宽度”，w/5）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“类”、“传奇部分”）
.attr（“transform”、“translate”（+（（w/4）+padding）+），“+legendpattingtop+”）；
var label\u group=legend.append（“svg:g”）
.attr（“类别”、“标签组”）
.attr（“transform”、“translate”（+（（w/3）+20+），“+0+”）；
var legend\u group=legend.append（“svg:g”）
.attr（“类”、“图例组”）
.attr（“转换”、“翻译”（+（（w/3）-100+）、“+0+”）；
//画标签
var labels=label\u group.selectAll（“text.labels”）
.数据（数据）；
var legendHeight=legendPaddingTop；
var-ySpace=18；
var-labelPadding=3；
labels.enter（）.append（“svg:text”）
.attr（“类别”、“标签”）
.attr（“dy”，函数（d，i）{
legendHeight+=ySpace；
返回（ySpace*i）+标签填充；
})
.attr（“文本锚定”，函数（d）{
返回“开始”；
})
.文本（功能（d）{
返回d.标签；
});
labels.exit（）.remove（）；
变量图例=图例组。选择全部（“圆圈”）。数据（数据）；
legend.enter（）.append（“svg:circle”）
.attr（“cx”，100）
.attr（“cy”，函数（d，i）{
返回ySpace*i；
})
.attr（“r”，7）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，功能（d，i）{
返回颜色