如何取消d3中的计划的过渡？ [英] How to cancel scheduled transition in d3?

问题描述

转换代码

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?

推荐答案

正如在另一个答案中指出的，你所需要的是安排一个新的过渡。然而，整个事情比你在代码中做的更容易 - 不需要单独的 .each（）函数。要初始计划转移，您只需要执行

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

完成演示此处。

这篇关于如何取消d3中的计划的过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！