Как сделать увеличение значения в течение времени в text d3?

Question

[Владимир Голубь]

Пробую задать с помощью интервал, но все равно всегда 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;
          })

Нужно вывод 1, 2, 3 в так далее, в течении 500мс ?

Answer 1

[0xD34F]

Вместо .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);
});