How to use a timer in d3 V3?

Question

I have a function triggerWave()that makes points on the canvas animate in wave form. I use d3.ease('quad-in')to facilitate, and I would like to use d3.timer()to make a function call triggerWave()on a 200mstimeframe. I was not lucky to find 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});
}

When I call d3.timer()as above, the function triggerWave()is called endlessly and never stops. I want to manipulate or control time. In my case, I want timer () to start for 200ms.

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

Answer 1

3 d3.timer.stop(). true , .

, d3 timeout, , .. . , , , - .

, , , :

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.
}

, .

Answer 2

( EDIT: , " 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>

Hide result

, , triggerWave 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>

Hide result

D3 v3, v3 d3.timeout, , 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>

Hide result