Erstellen einer Animation für die D3- und SVG-Elemente

Question

Ich versuche, ein olympisches Logo (mit fünf Kreisen) mit SVG und D3.JS, zu erstellen, indem ich die Kreiseigenschaften aus den JSON-Daten erhalte und dann einige Animationen zuweisen möchte zu den Kreisen, möglicherweise den ersten Kreis mit dem letzten Kreis durch Animation zu tauschen. Ich bin auf halbem Wege durch den Code gekommen, aber ich bin beeindruckt, wie man auf Kreise zugreift und einige Übergänge hinzufügt. Mein Code ist hier.

JSBIN

Answer 1

Was ich in der Regel tun, ist eine Update-Funktion haben, die die Daten empfängt und aktualisiert die Knoten entsprechend ein zusätzlicher Parameter ich hinzufügen, ist eine Animation Flag Übergänge führen auf Update

function update(data, animate) { 
    // bind data 
    // enter 
    // enter + update 
    // - if animate = true perform animation 
    // exit 
} 

demo