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

다른 답변에서 지적한 것처럼 새로운 전환을 예약하면됩니다. 그러나 모든 것이 코드에서 수행하는 것보다 훨씬 쉽습니다. 별도의 .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(); 

전체 데모 here입니다.

Answer 2

요소에서 새 전환을 시작하면 이미 실행중인 전환이 중지됩니다. 당신이 적용 시작되는 경우에만, 당신이 아래의 코드를 시도 할 경우 전환을 중지하려는 경우 당신은/일시 정지 0

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

같은 기간에 새로운 전환을 설정하여 D3의 전환을 중지 할 수 있습니다.

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

Answer 3

허용 된 대답은 최신 버전의 d3에서 작동하지 않습니다. d3 v4를 사용하는 경우 선택시 .interrupt()으로 전화해야합니다.