Как отменить запланированный переход в d3?

Ответ 1

Как указано в другом ответе, вам нужно только запланировать новый переход. Однако все это намного проще, чем то, что вы делаете в своем коде - нет необходимости в отдельной функции .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();

Заполните демо здесь.

Ответ 2

Принятый ответ не работает с последней версией d3. Если вы используете d3 v4, вы должны вызвать .interrupt() в своем выборе.

Ответ 3

Запуск нового перехода на элемент останавливает любой уже запущенный переход. Вы можете приостановить/остановить переход d3, установив новый переход с длительностью в 0.

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