d3 / d3-transition

Animated transitions for D3 selections.
https://d3js.org/d3-transition
ISC License
223 stars 65 forks source link

[d3@6] transition.end() crashes #112

Closed Fil closed 4 years ago

Fil commented 4 years ago

d3.transition().duration(1000).end() results in TypeError: undefined is not a function

by bisection (see below) the offending commit appears to be 60be25f8519ecbdf647059719efcd8dee8e50486

Though the commit is in d3-selection, the issue can be fixed in d3-transition by using that.selection().size() instead of that.size() in https://github.com/d3/d3-transition/blob/956f0ae3e53723d69250b06fe760a36bd12f1162/src/transition/end.js#L4

This is the solution I'll be pushing in d3-transition@two.

The issue is also isolated in https://observablehq.com/d/c976841fa49523ee, but for bisection it was easier to work wih local files and the following test case:

<body>

<script src="../d3-dispatch/dist/d3-dispatch.js"></script>
<script src="../d3-ease/dist/d3-ease.js"></script>
<script src="../d3-timer/dist/d3-timer.js"></script>
<script src="../d3-selection/dist/d3-selection.js"></script>
<script src="../d3-transition/dist/d3-transition.js"></script>

<script>

(async function() {
  d3.select("body").append("p").html("start");

  await d3.select("body")
  .transition()
  .duration(1000)
  .end();

  d3.select("body").append("p").html("end first transition");

  await d3.transition()
  .duration(1000)
  .end();

  d3.select("body").append("p").html("end second transition")

})()

</script>

Issue detected by @enjalot

mbostock commented 4 years ago

Shouldn’t transitions be iterable?

mbostock commented 4 years ago

113

mbostock commented 4 years ago

I recommend we revert 91990a1e5959c107319a4b59bfcc8f203f2a944b in favor of #114. A number of inherited selection methods depend on transitions being iterable, such as transition.each and transition.nodes, and they’ll be broken unless transitions are iterable.