Creating animation to the D3 and SVG elements

Question

I am trying to create Olympic logo(with five circles) using the SVG and D3.JS, by getting the circle properties from the JSON data,and then i want to assign some animations to the circles, possibly swapping first circle with the last circle, through animation. i came half way through the code but i am struck with how to access circles and add some transitions.my code is here.

JSBIN

Answer 1

What I usually do is have an update function which receives the data and updates the nodes accordingly an additional parameter I add is a animation flag to perform transitions on update

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

demo