如何控制d3力布局的仿真速度

Question

我正在遵循这样一个d3力布局示例。

我想控制点飞向星团的速度。换句话说，我希望有些点需要更多的时间才能到达它们的最终位置，而有些点需要更少的时间。

我试着添加一个定时器功能来控制每个滴答声的时间，但没有成功。

this.force = d3.layout.force()
.on("tick", setTimeout(tick(d), 50));

我需要帮助。

Answer 1

不要设置计时器来调用tick函数，这是由部队布局自动完成的。

但是，您可以设置许多参数来修改力布局的行为。与你想做的事情最相关的是以下内容。

1. .friction()对应于速度衰减的速度，因此直接控制节点移动的速度。默认值为0.9，若要使速度变慢，请将其设置为较低的值
2. .charge()控制节点之间的吸引力/排斥力有多强。这不是直接控制速度，而是影响速度

在这些参数中，只有后者可以逐节点设置。这使得实现你想要的东西有点棘手，因为你必须小心地平衡力量。首先，将要缓慢移动的节点的电荷设置为接近0应该会有所帮助。

部队布局的其他一些参数我认为在您的特定情况下不会有用(我想到的是.linkStrength()和.linkDistance())，但您可能还是想看看。

Answer 2

我找到了一个可能的解决方案。我可以手动调用每个节点的tick函数，比如说100次，并记录路径。然后我使用定时器函数根据路径重新绘制节点。通过这种方式，我可以控制每个节点的绘制时间。这有道理吗？

Answer 3

更改setIntervel功能，层间定时

试试这个代码：

Fiddle:

setInterval(function(){
nodes.push({id: ~~(Math.random() * foci.length)});
force.start();
node = node.data(nodes);
node.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 8)
.style("fill", function(d) { return fill(d.id); })
.style("stroke", function(d) { return d3.rgb(fill(d.id)).darker(2); })
.call(force.drag);
}, 50); //change the intervel time