How to use the d3-timer.timer function in d3-timer

* Typescript definition tests for d3/d3-timer module
 *
 * Note: These tests are intended to test the definitions only
 * in the sense of typing and call signature consistency. They
 * are not intended as functional tests.
 */

import * as d3Timer from 'd3-timer';

// Test now definition
const now: number = d3Timer.now();

// Test timer and timerFlush definitions ------------

let t0: d3Timer.Timer = d3Timer.timer((elapsed: number) => { console.log(elapsed); });
let t1: d3Timer.Timer = d3Timer.timer((elapsed: number) => { console.log(elapsed); }, 150);
let t2: d3Timer.Timer = d3Timer.timer((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());

t0.restart((elapsed: number) => { console.log(elapsed); });
t0.restart((elapsed: number) => { console.log(elapsed); }, 150);
t0.restart((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());
t0.stop();

d3Timer.timerFlush();

t1.stop(); t2.stop();

// Test timeout Timer definitions  --------------------------------

t0 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());

transition() {
    const { delay } = this.props;

    const timeScale = scaleLinear()
      .domain([0, DURATION])
      .clamp(true);

    const i = interpolateNumber(0, 4);

    const t = timer((elapsed) => {
      const te = easeElasticOut(timeScale(elapsed), 4, 0.5)

      const radius = i(te);
      this.setState({ radius });

      if (elapsed > DURATION) return t.stop();
    }, 80 * delay);
  }

onRemove({ removeNode, duration }) {
    const beg = this.node.getAttribute('transform');
    const interp0 = interpolateTransformSvg(beg, 'translate(0,500)');
    const interp1 = interpolateNumber(1, 1e-6);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;

      this.node.setAttribute('transform', interp0(t));
      this.node.setAttribute('opacity', interp1(t));

      if (t === 1) {
        this.transition.stop();
        removeNode();
      }
    });
  }

isEntering({xScale0, xScale1, tick: {data}, duration}, {tick}) {

    let beg = `translate(${xScale0(data)},0)`;
    let end = `translate(${xScale1(data)},0)`;

    let interp0 = interpolateTransformSvg(beg, end);
    let interp1 = interpolateNumber(1e-6, 1);

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      tick.setAttribute('transform', interp0(t));
      tick.setAttribute('opacity', interp1(t));
      if (t === 1) {
        this.transition.stop();
      }
    });
  }

useEffect(() => {
    let lastColorChange = 0

    const timerLoop = timer(() => {
      if (lastColorChange + 100 < Date.now()) {
        lastColorChange = Date.now()

        for (let i = 0; i < pointers.length; i++) {
          const p = pointers[i]
          p.color = generateColor()
        }
      }
    })

    return () => timerLoop.stop()
  })

isExiting({ xScale0, xScale1, tick: { udid, data }, removeTick, duration }, { tick }) {
    const beg = `translate(${xScale0(data)},0)`;
    const end = `translate(${xScale1(data)},0)`;

    const interp0 = interpolateTransformSvg(beg, end);
    const interp1 = interpolateNumber(tick.getAttribute('opacity'), 1e-6);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;

      tick.setAttribute('transform', interp0(t));
      tick.setAttribute('opacity', interp1(t));

      if (t === 1) {
        this.transition.stop();
        removeTick(udid);
      }
    });
  }

export function measure(sec: number, drawFPS: (fps: string) => void) : void {
	let ctr = 0

	timer(() => ctr++)

	interval(() => {
		drawFPS((ctr / sec).toPrecision(3))
		ctr = 0
	}, 1000 * sec)
}

onAppear({ prevXScale, currXScale, node: { data }, duration }) {
    const beg = `translate(${prevXScale(data)},0)`;
    const end = `translate(${currXScale(data)},0)`;

    const interp0 = interpolateTransformSvg(beg, end);
    const interp1 = interpolateNumber(1e-6, 1);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;

      this.tick.setAttribute('transform', interp0(t));
      this.tick.setAttribute('opacity', interp1(t));

      if (t === 1) {
        this.transition.stop();
      }
    });
  }

export default function(nodes) {
  var simulation,
      alpha = 1,
      alphaMin = 0.001,
      alphaDecay = 1 - Math.pow(alphaMin, 1 / 300),
      alphaTarget = 0,
      velocityDecay = 0.6,
      forces = new Map(),
      stepper = timer(step),
      event = dispatch("tick", "end");

  if (nodes == null) nodes = [];

  function step() {
    tick();
    event.call("tick", simulation);
    if (alpha < alphaMin) {
      stepper.stop();
      event.call("end", simulation);
    }
  }

  function tick(iterations) {
    var i, n = nodes.length, node;

useEffect(() => {
    let prevElapsed = 0
    let flipped = 0

    const { program, uniforms } = particleMaterial

    const timerLoop = timer(e => {
      const elapsed = e * 0.005
      const delta = elapsed - prevElapsed
      prevElapsed = elapsed

      const pos = compute(elapsed, delta * 10)

      gl.useProgram(program)
      gl.uniform1f(uniforms.flipped, flipped)
      gl.uniform1i(uniforms.texPosition, pos.read.attach(texUnit))

      renderScene()

      flipped = flipped === 0 ? 1 : 0
    })

    return () => timerLoop.stop()