Wie geplante Verschiebung in D3 abbrechen?

Question

Transition-Code,

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

Wie kann ich die geplanten/verzögerte Transaktionen stoppen/stornieren?

Answer 1

Wie in der anderen Antwort erwähnt, ist alles, was Sie brauchen, um einen neuen Übergang zu planen. Das Ganze ist jedoch viel einfacher als das, was Sie in Ihrem Code tun - die separate .each()-Funktion ist nicht erforderlich. Um zunächst die Übergänge zu planen, können Sie einfach

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

Die Funktion tun alle Übergänge zu stoppen (Linien- und Laufen) ist einfach

d3.selectAll("circle").transition(); 

komplette Demo here.

Answer 2

Das Starten eines neuen Übergangs für das Element stoppt jeden Übergang, der bereits ausgeführt wird. Sie können einen d3 Übergang Pause/Stopp einen neuen Übergang mit Dauer als 0.

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

indem Wenn Sie den Übergang stoppen möchte, wenn und nur wenn es gestartet wird, anwenden, können Sie den Code unten versuchen.

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

Die angenommene Antwort funktioniert nicht mit der neuesten Version von d3. Wenn Sie d3 v4 verwenden, sollten Sie .interrupt() auf Ihrer Auswahl anrufen.