How to make value increase over time in text d3?

Question

SVG

I try to set using the interval, but it's still always 0.

svgContainer.selectAll('g text')
          .transition()
          .ease(d3.easeLinear)
          .duration(500)
          .attr('opacity', 1)
          .text((d, i) => {
            let value = 0;

            const valueInt = setInterval(() => {
              value++;

              if (value === this.lineData[i]) {
                clearTimeout(valueInt);
              } else {
            }, 500/this.lineData[i]);

            return value;
          })

Do you need to output 1, 2, 3 in so on, within 500ms?

Answer 1

Instead let it be.text((d, i) => { ...

.each((d, i, a) => {
  const el = d3.select(a[i]);
  const max = this.lineData[i];
  let value = 0;

  const intervalId = setInterval(() => {
    if (++value == max) {
      clearInterval(intervalId);
    }

    el.text(value);
  }, 500 / max);
});