d3-transition v2: Error: transition 1 not found

user_5404186 0
Viewed 1796

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 .

d3.js javascript
2 Answers

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);
user_6965350

I thought I faced a dead end therefore I opened an issue which, turned out to be a support request, my bad .

There were two things to fix in my solution:

  1. not inheriting from the transition t because it was not needed
  2. modifying my import import {transition} from 'd3-transition'; to import 'd3-transition'; otherwise the transition without t would be not found

Applied to my question's code:

import 'd3-transition'; // <--- 1. import modiffied
 
const section = this.svg.selectAll('.area').data([data], (d) => {
    return this.y(d.value);
});

section
      .enter()
      .append('path')
      .merge(section)
      .transition() // <--- 2. not inheriting t
      .duration(this.animationDuration)
      .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);
user_54041860
Related