Javascript 如何取消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);
           });

---

如何停止/取消计划/延迟的事务？

在元素上启动新转换将停止任何已运行的转换。您可以通过将持续时间设置为0的新转换来暂停/停止d3转换

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

如果您想在且仅当转换开始应用时停止转换，您可以尝试下面的代码

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

---

正如在另一个答案中指出的，您所需要的只是安排一个新的过渡。但是，整个过程比您在代码中所做的要简单得多——不需要单独的

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

---

完成演示。

接受的答案不适用于最新版本的d3。如果您使用的是d3 v4，您应该访问您的选择。

非常感谢您的回答。在这种情况下，由于延迟，当您执行代码时，动画可能根本没有启动。它只是计划好的，但还没有开始。我也尝试了同样的方法，但无效。更新了代码以检查转换是否已开始应用其更改。希望这有帮助。