[v2.0.0] error: transition 1 not found

[peterpeterparker]

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

I see that the error msg is new in v2 and was introduced in src/selection/transition.js with PR https://github.com/d3/d3-transition/pull/94/files but I honestly don't get the problem. Is that an issue or should I migrate my code and if yes, what are the breaking changes?

Thanks in advance for your time!

Code

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

Steps to reproduce

You can reproduce my issue running my component as following:

git clone https://github.com/deckgo/deckdeckgo -b stencil-v2
cd deckdeckgo/webcomponents/charts/
npm i
npm run start

[Fil]

I'm not sure I understand why the transition t is terminated when you call it, but maybe you could fix the situation by removing it and using section….transition() instead?

[mbostock]

It’s not clear what the purpose of the t transition is from the code snippet.

If you don’t need to inherit from the transition t, then just drop the code that defines and references t entirely.

If you do want to inherit from the transition t, then the this.svg selection must be descendant elements of the t transition’s selected elements, which is presumably document.documentElement. So, this error would be expected if this.svg represents a detached selection (elements that have not yet been added to the DOM). In that case, if you want to inherit parameters, then define the root transition t on the root element of your selection, such as t = this.svg.transition() rather than t = transition().

[mbostock]

(Happy to continue helping here but this is more of a support request than a bug, so closing, but please continue to discuss.)

[peterpeterparker]

Thank you for your quick answer 👍

Indeed I was able to solve the issue by not inheriting the transition but, doing so, I also had to modify the import of the transition otherwise it would have not been loaded.

Not OK: import {transition} from 'd3-transition';

OK: import 'd3-transition';

Applied to my above 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() // <--- not inheriting
      .duration(this.animationDuration)
      .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);

All good now. Thx again for your help.