Как отменить запланированный переход в 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);
           });

Как я могу остановить/отменить запланированные/отложенные транзакции?

Ответ 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;
           });
   });