Wie macht man einen Kreis, der nacheinander mit dem Übergang d3 erscheint?

Question

Ich verfolge den Kreis example:

ich den Kreis unten erstellt, und ich möchte die Opazität Übergang dass machen, wie die Datenaktualisierungen gesetzt ist, wird der Kreis erscheinen nacheinander starten. Wenn zum Beispiel die Datenlänge 5 ist, erscheint Kreis 1, dann Kreis 2, ... schließlich Kreis 5. Und wenn die Daten aktualisiert werden, so dass ihre Länge 2 ist, dann erscheint Kreis 1, dann erscheint Kreis 2. Wie mache ich diesen Effekt? Bisher arbeitet der Übergang() einheitlich am Datensatz.

circle.enter().append("circle") 
     .attr("class", "dot"); 

    // Update (set the dynamic properties of the elements) 
    circle 
     .attr("r", 5) 
     .attr("cy", 20) 
     .attr("cx", function(d,i){return i*50;}) 
     .attr("fill", "red"); 

    svg.selectAll("circle") 
     .style("opacity", 0) 
     .transition() 
     .duration(1000) 
     .style("opacity", 1); 

Answer 1

Problem:

eine Verzögerung für jedes Element in einem "Übergang" Auswahl-Einstellung.

Lösung:

Verwenden delay() mit function(d, i)

Anleitung:

Sie haben diese nach transition() hinzuzufügen:

.delay(function(d,i){ return i * someNumber }) 

Wo somenumber die Verzögerung ist, in Millisekunden für jedes Element.