Javascript D3.js动画更新

我的工作是这样的：

---

我正在用

jQuery

加载数据，并用它运行整个更新功能。我想做的是，在触发更新之前，让所有的圆圈都靠近主圆圈。我能做那样的事吗？我尝试重写

勾选

函数，使其与现在一样，只是使用

d.x-50

，但没有成功。

有几种方法可以实现您想要的功能，但这是我的解决方案：以较小的

链接距离重新启动力：

var inter = setInterval(function() {
    updateData();
    setTimeout(function() {
        force.linkDistance(20);
        force.start().alpha(0.01);
    }, 2000);
}, 5000);

以下是演示：


var数据={
节点：[
{“x”：250，“y”：250，“color”：“green”，“name”：“TEST”，“r”：“28”，“fixed”：true}，
{“x”：120，“y”：150，“名称”：“forums.macrumors”，“分数”：-12.2，“图标”：“}，
{“x”：140，“y”：150，“名称”：“delhidailynews”，“分数”：-0.08，“图标”：“}，
{“x”：280，“y”：150，“名称”：“4-交易者”，“分数”：-0.055，“图标”：“}，
{“x”：300，“y”：150，“名称”：“phonearena”，“分数”：0.45，“图标”：“}，
{“x”：40，“y”：200，“名称”：“inga3.wordpress”，“分数”：-0.27，“图标”：“}，
{“x”：70，“y”：200，“名称”：“kahinaweb.wordpress”，“分数”：-0.28，“图标”：“}，
{“x”：100，“y”：200，“名称”：“bilqueessite.wordpress”，“分数”：-0.3，“图标”：“}，
{“x”：130，“y”：200，“名称”：“beforeitsnews”，“分数”：-0.72，“图标”：“}，
{“x”：380，“y”：200，“名称”：“雅虎”，“得分”：-0.66，“图标”：“”}
],
链接：[
{“源”：0，“目标”：1，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：2，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：3，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：4，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：5，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：6，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：7，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：8，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：9，“距离”：180，“标签”：“”}
]
};
可变宽度=500，
高度=500；
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
.充电（功能（d）{
var费用=-500；
如果（d.index==0）费用=10*费用；
退货费；
})
.linkDistance（d=>d.distance）
.在（“滴答”，滴答）上；
var svg=d3。选择（“orb”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“类”、“主SVG”）；
var link=svg.selectAll（“.link”），
node=svg.selectAll（“.node”），
path=svg.selectAll（“.path”）；
force.nodes（data.nodes）
.links（data.links）
.start（）；
var edges=link.data（data.links）
.输入（）
.附加（“行”）
.attr（“类”、“链接”）
.style（“笔划”、“灰色”）
.style（“指针事件”、“无”）；
node=node.data（data.nodes）
.输入（）
.附加（“g”）；
node.append（“圆”）
.attr（“类”、“圈”）
.attr（“r”，函数（d）{if（d.r）{return d.r；}else{return“18”；}}）
.attr（“fill”，函数（d）{if（d.color）{return d.color；}else{return“orange”；}）
.attr（“stroke”，函数（d）{if（d.color）{return d.color；}else{return“orange”；}}）；
var linkwrap=node.append（“a”）
.attr（“href”，“3”）；
linkwrap.append（“图像”）
.attr（“类”、“srcico”）
.attr（“高度”，“16像素”）
.attr（“宽度”，“16px”）
.attr（“xlink:href”，函数（d）{return d.icon；}）；
linkwrap.append（“文本”）
.attr（“填充”、“白色”）
.attr（“笔划”、“无”）
.attr（“x”、“232”）
.attr（“y”、“255”）
.text（函数（d）{返回d.ticker；}）；
函数tick（）{
var link=svg.selectAll（“行”）；
var edgepaths=svg.selectAll（“.edgepath”）；
var edgelabels=svg.selectAll（“.edgelabel”）；
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
svg.selectAll（“.circle”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
svg.selectAll（“.srcico”）
.attr（“x”，函数（d）{返回d.x-5；}）
.attr（“y”，函数（d）{返回d.y-8；}）；
svg.selectAll（“.notecap”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）；
}
var inter=setInterval（函数（）{
更新数据（）；
setTimeout（函数（）{
力.连杆距离（20）；
强制启动（）.alpha（0.01）；
},2000);
}, 5000); 
函数updateData（）{
风险值数据={
节点：[
{“x”：250，“y”：250，“颜色”：“灰色”，“名称”：“测试”，“r”：“28”，“固定”：真}，
{“x”：120，“y”：210，“名称”：“分数”：-12.2，“图标”：“}，
{“x”：140，“y”：210，“名称”：“分数”：-0.08，“图标”：“}，
{“x”：280，“y”：210，“名称”：“分数”：-0.055，“图标”：“}，
{“x”：300，“y”：210，“名称”：“分数”：0.45，“图标”：“}，
{“x”：40，“y”：200，“名称”：“分数”：-0.27，“图标”：“}，
{“x”：70，“y”：200，“名称”：“分数”：-0.28，“图标”：”}，
{“x”：100，“y”：200，“名称”：“分数”：-0.3，“图标”：“}，
{“x”：130，“y”：200，“名称”：“分数”：-0.72，“图标”：“}，
{“x”：380，“y”：200，“名称”：“分数”：-0.66，“图标”：“}，
{“x”：160，“y”：200，“名称”：“分数”：-0.317，“图标”：“}，
{“x”：280，“y”：200，“名称”：“分数”：-0.37，“图标”：“}，
{“x”：270，“y”：200，“名称”：“分数”：-0.49，“图标”：“}，
{“x”：340，“y”：200，“名称”：“分数”：-0.62，“图标”：“}，
{“x”：100，“y”：300，“名称”：“分数”：-0.31，“图标”：“}，
{“x”：140，“y”：300，“名称”：“分数”：-0.457，“图标”：“}，
{“x”：180，“y”：300，“名称”：“分数”：-0.472，“图标”：“}，
{“x”：280，“y”：300，“名称”：“分数”：-0.66，“图标”：“}，
{“x”：320，“y”：300，“名称”：“分数”：-0.68，“图标”：“}，
{“x”：410，“y”：300，“名称”：“分数”：-0.8，“图标”：“}，
{“x”：260，“y”：300，“名称”：“分数”：-0.86，“图标”：”}
],
链接：[
{“源”：0，“目标”：1，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：2，“距离”：180，“标签”：“”}，
{“源”：0，“目标”：3，“距离”：180，“标签”：“”}，
{“来源”：