如何在 d3 V3 中使用计时器？

Question

我有一个函数triggerWave()可以使画布上的点以波形动画。我正在使用d3.ease('quad-in')缓动，我想用来在时间范围内d3.timer()进行triggerWave()函数调用200ms。我很不幸在 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.

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

Answer 1

（编辑：我完全完全错过了问题标题中那个巨大的“ V3 ”。对不起。我会在这里保留这个答案作为 v4 用户的参考）

由于您triggerWave在triggerWave函数本身内部调用，因此您不需要d3.timer,d3.timeout而是。根据该API，d3.timeout：

与定时器类似，除了定时器在第一次回调时自动停止。保证不会在后台运行的 setTimeout 的合适替代品。回调传递经过的时间。

另外，请注意您count每次运行该功能时都在重置这一事实，这将不起作用。在函数外设置它的初始值。

这是包含这些更改的演示。我每 200 毫秒调用一次该函数，直到count达到50：

var p = d3.select("p")
var count = 0;

triggerWave();

function triggerWave() {
  p.html("Count is " + count)
  if (count < 50) {
    count++;
    d3.timeout(triggerWave, 200)
  } else {
    return
  }
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<p></p>

您还可以使用传递给triggerWaveby的参数跟踪总经过时间d3.timeout：

var p = d3.select("p")
var count = 0;
var elapsed = 0;
var format = d3.format(".2")

triggerWave();

function triggerWave(t) {
  elapsed = t ? elapsed + t : elapsed;
  p.html("Count is " + count + ", and the elapsed time is " + format(elapsed/1000) + " seconds")
  if (count < 50) {
    count++;
    d3.timeout(triggerWave, 200)
  } else {
    return
  }
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<p></p>

由于使用的是D3 V3，并且因为没有d3.timeout在v3中，您可以使用JavaScript的香草做相同的方法：setTimeout。

这是一个演示：

var p = d3.select("p")
var count = 0;

triggerWave();

function triggerWave() {
  p.html("Count is " + count)
  if (count < 50) {
    count++;
    setTimeout(triggerWave, 200)
  } else {
    return
  }
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<p></p>

Answer 2

在版本3中，没有这个d3.timer.stop()功能。您必须true在一段时间后返回才能停止计时器。

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

这是我想出的，我想这就是您正在寻找的：

您可以创建另一个名为 as 的函数，activateTriggerWave()该函数将在单击按钮时调用，并且在该函数内，您可以triggerWave()使用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.
}

我希望这有帮助。