D3力图中的线性运动

时间:2019-05-31 10:06:19

标签: javascript d3.js

我有一个包含数周的节点和链接的数据集(某些节点和链接会持续存在,而另一些会随着时间的推移而变化),我正在使用力布局来确定其位置。

默认情况下,当力移动节点并链接它们的初始速度时,它们的初始速度会很高,然后随着alpha的下降而减小,并且图形稳定。 我希望这些节点和链接的运动始终是线性的(尽可能)。

我试图通过删除滴答滴答监听器来实现此目的,该滴答滴答监听器会每滴答滴答地移动节点和链接,并监听滴答结束事件,然后将节点和链接过渡到最终位置,即

nodeSelection
  .transition()
  .duration(1800)
  .ease(d3.easeLinear)
  .attr('cx', d => d.x)
  .attr('cy', d => d.y);

linkSelection
  .transition()
  .duration(1800)
  .ease(d3.easeLinear)
  .attr('x1', d => d.source.x)
  .attr('y1', d => d.source.y)
  .attr('x2', d => d.target.x)
  .attr('y2', d => d.target.y);

这对于节点非常有用,但是,如果链接应该附加到节点,我希望链接随节点一起移动,而在我的示例中,它们将变得分离。

是否可以通过线性力运动或修改我的“手动”过渡来实现自己的目标?

Full source available on codesandbox

0 个答案:

没有答案