Question

我正在关注像this这样的d3强制布局示例。

我想控制飞向群集的点的速度。换句话说，我想要一些点需要更多时间才能到达最终位置，而一些点需要更少的时间。

我尝试添加一个计时器功能来控制每个刻度的时间，但它不起作用。

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

我需要帮助。

Answer 1

不要设置计时器来调用tick功能，这是由力布局自动完成的。

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

.friction()对应于速度衰减的速度，因此直接控制节点移动的速度。默认值为0.9，为了使一切变慢，将其设置为较低的值。
.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

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

3 个答案: