CODEWITHSUNDEEP
d3.js
Tristan
Tristan

Reputation: 3232

How to jump to the end of a transition in D3?

Let's say I have a transtition going on such as 

svg.select('rect')
   .transition()
   .duration(5000)
   .attr('opacity', 0)
   .each('end',function() {
       d3.select(this).remove()
   });

Is there a way to jump to the end of that transition and trigger the callback?

Upvotes: 0

Views: 569

Answers (1)

Tristan
Tristan

Reputation: 3232

D3 does not seem to provide a way to jump to the final state of the transition but one can interrupt the transition and use a specific callback on interruption to set the element as intended:

svg.select('rect')
   .transition()
   .duration(5000)
   .attr('opacity', 0)
   .each('end',function() {
       d3.select(this).remove();
   })
   .each('interrupt',function() {
       // This is called when the transition is interrupted
       d3.select(this).remove();
   });

setTimeout(function() {
    // This interrupts any ongoing transitions
    svg.select('rect').transition();
}, 1000);

Upvotes: 3

Related Questions