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

As pointed out in the other answer, all you need is to schedule a new transition. However, the whole thing is much easier than what you're doing in your code -- there's no need for the separate .each() function. To schedule the transitions initially, you can simply do

d3.select('chart').select('svg')
  .selectAll("circle")
  .data(sampleData)
  .enter().append('circle')
  .transition()
  .delay(function(d, i) { return i*50; })
  .attr('cx', function(d) {return d.x;})
  .attr('cy', function(d) {return d.y;})
  .attr('r', 4);

The function to stop all transitions (scheduled and running) is simply

d3.selectAll("circle").transition();

Complete demo here.