如何取消d3中的预定转换？

Question

过渡代码,

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

如何停止/取消预定/延迟交易？

Answer 1

接受的答案不适用于最新版本的d3.如果你正在使用d3 v4,你应该打电话.interrupt()给你的选择.

Answer 2

正如另一个答案所指出的,您只需要安排一个新的过渡.但是,整个事情比你在代码中所做的要容易得多 - 不需要单独的.each()功能.要最初安排过渡,您可以这样做

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

停止所有转换(计划和运行)的功能很简单

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

在这里完成演示.