d3-transition v2: Error: transition 1 not found

Question

I try to migrate an existing component from d3-transition v1.3.2 to v2.0.0 but get the following error at runtime: Error: transition 1 not found

My code is the following:

const t = transition();

const section = this.svg.selectAll('.area').data([data], (d) => {
    return this.y(d.value);
});

section
      .enter()
      .append('path')
      .merge(section)
      .transition(t)
      .duration(this.animationDuration)
      .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);

If I remove the transition, the charts are rendered correctly. I understand I should probably plug somewhere a selectAll('....') but I am unsure at which stage of the chain and what to select.

Any help would be appreciated 🙏.

Answer 1

In my case the problem was with transition reusing. I thought it can be declared once and used over and over. Transitions are not reusable and a factory must be used.

When a transition ends it becomes unavailable. transition function(the one in chain) in such case used to load default transition if the one in parameter was invalid, now it errors out.

The correct solution now is to use a transition factory

// there's nothing wrong with this import
import {transition} from 'd3-transition';
function getTransition() {
    return transition()
      .duration(1000)
      .ease(easeLinear)
}

const section = this.svg.selectAll('.area').data([data], (d) => {
    return this.y(d.value);
});

section
      .enter()
      .append('path')
      .merge(section)
      .transition(getTransition())
      // .duration(this.animationDuration) // now duration
      // .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);