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

How can I stop/cancel the scheduled/delayed transactions?

Answer 1

The accepted answer does not work with the most recent version of d3. If you're using d3 v4, you should call .interrupt() on your selection.