如何在d3 V3中使用计时器? [英] How to use timer in d3 V3?

问题描述

我有一个函数triggerWave()，它使画布上的点以波形形式动画.我正在使用d3.ease('quad-in')进行缓动，并且希望使用d3.timer()在200ms时间范围内进行triggerWave()函数调用.在d3.timer上找到教程或示例时，我很不走运.

I have a function triggerWave() which makes the points on the canvas animate in the wave form. I am using d3.ease('quad-in') for easing and I would like to use d3.timer() to make the triggerWave() function call over 200ms timeframe. I am out of luck in finding the tutorials or examples on d3.timer.

triggerWave() {
  //function logic
  let count = 0;
  let xScale = d3.scale.linear().range([1,2]); // want the value to change from 1 to 2.
  let zScale = d3.scale.linear().domain([0, 200]); // 200 ms.
  let value = xScale(d3.ease('quad-in')(zScale(count)));
  if(count < 200){
   count++;
   d3.timer(() => triggerWave());
  } else {
    // do something
  }
  this.wave.next({currentFrame: value});
}

当我如上所述调用d3.timer()时，triggerWave()函数将被无限次调用，并且永不停止.我想操纵或控制时间.就我而言，我想为200ms触发timer().

When I call d3.timer() as above, the triggerWave() function gets called infinite times and never stops. I want to manipulate or control the time. In my case, I want the timer() to be triggered for 200ms.

我如何理解如何使用d3.timer()功能?

How can I understand how to use the d3.timer() function?

推荐答案

在版本3中，没有d3.timer.stop()函数.您必须在一定时间后返回true才能停止计时器.

In version 3, there is no d3.timer.stop() function. You have to return true after a certain period of time to stop the timer.

在Gerardo的回答中，他出色地解释了如何使用d3 timeout，这将是对您的问题的有效解决方案，即在一定时间内反复调用该函数.但是，看看您对Gerardo答案的评论，我认为您正在寻找其他东西.

In Gerardo's answer, he explained fabulously how to use the d3 timeout which would be a valid solution to your problem i.e., to call the function over and over for a certain period of time. But looking at your comments on Gerardo's answer, I think you are looking for something else.

这是我想出的，我想这就是您想要的:

Here's what I came up with and I think this is what you are looking for:

您可以创建另一个名为activateTriggerWave()的函数，将在单击按钮时调用该函数，并且可以在该函数内部使用d3 timer调用triggerWave()方法.

You can create an another function called as activateTriggerWave() which will be invoked on the button click and inside this function, you can call your triggerWave() method using the d3 timer.

function activateTriggerWave() {
  d3.timer(elapsed => {
  this.triggerWave();
  if(elapsed >= 200){
    return true; // this will stop the d3 timer. 
  }
});
}

triggerWave() {
 // here you can do whatever logic you want to implement.
}

我希望这会有所帮助.

I hope this helps.

这篇关于如何在d3 V3中使用计时器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！