How to cancel scheduled transition in d3?

Question

Transition Code,

d3.select(\'chart\').select(\'svg\')
    .selectAll(\"circle\")
    .data(sampleData)
    .enter().append(\'circle\')
    .each(function (d,         


        

Answer 1

Starting a new transition on the element stops any transition that is already running. You can pause/stop a d3 transition by setting a new transition with duration as 0.

function stopCircleTransitions(){
    if(startedApplyingTransitions)
       d3.select('chart').select('svg')
         .selectAll("circle")
         .each(function(d,i){
             d3.select(this)
               .transition()
               .duration(0);
         });
    }
} 

If you would like to stop the transition if and only if it is started applying, you can try the code below.

 var startedApplyingTransitions = false;
 d3.select('chart').select('svg')
   .selectAll("circle")
   .data(sampleData)
   .enter()
   .append('circle')
   .each(function (d,i){
       d3.select(this)
           .transition()
           .delay(i*50)
           .attr('cx', function(d) {return d.x;})
           .attr('cy', function(d) {return d.y;})
           .attr('r', 4)
           .each("end", function(){ //this code will do the trick
               startedApplyingTransitions = true;
           });
   });