如何控制d3力布局的模拟速度答案

【问题标题】：how to control the simulation speed of d3 force layout如何控制d3力布局的模拟速度
【发布时间】：2013-12-30 06:16:51
【问题描述】：

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

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

我尝试添加一个定时器功能来控制每个tick的时间，但是没有成功。

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

我需要这方面的帮助。

【问题讨论】：

标签： javascript d3.js force-layout

【解决方案1】：

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

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

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

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

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

【讨论】：

是的，我需要逐个节点设置速度。是否可以为每个刻度迭代添加“延迟”功能？我知道可以手动调用tick函数：“force.start(); for (var i = 0; i
并非没有破解强制布局。
我找到了一个可能的解决方案。我可以为每个节点手动调用刻度函数，比如 100 次，然后记录路径。然后我使用定时器函数根据路径重绘节点。这样，我可以控制每个节点的绘制时间。这有意义吗？
刻度处理程序是全局的。您唯一能做的就是忽略某些节点的事件。

【解决方案2】：

我找到了一个可能的解决方案。我可以为每个节点手动调用刻度函数，比如 100 次，然后记录路径。然后我使用定时器函数根据路径重绘节点。这样，我可以控制每个节点的绘制时间。这有意义吗？

【讨论】：

【解决方案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

【讨论】：

谢谢！但是您的代码仅更改插入新节点的时间间隔。如果我把间隔改成500，节点还是需要50才能飞到那个位置，我需要等450才能换另一个节点。相反，我需要改变节点的速度。这意味着每个节点需要 500 飞到它们的位置。