score:6

Accepted answer

in the simplest version, think of transitions as just a decoration on a selection. to update your code all you should need to do is take where you have:

selectednodecircles.attr(...);

and insert a transition:

selectednodecircles.transition().duration(1000).attr(...)

because you are just changing your "r" attribute from one numeric value to another d3 will take care of animating a transition between the two. you can see a very simplified example here

what is happening in your code is every element in the selection is getting a new value for r. the attribute is set and the svg is re-rendered and it's done.

when you add the transition then instead of setting the attribute directly you instead set the end value of a transition that is created for each element of the selection. in fact if you debug during the transition you should be able to see __transition objects on all the circles.

this transition object will read the initial value of the attribute and take your end value and then compute an in-between value based on a parameter that goes from 0 to 1 over time. the time it takes that parameter to get from 0 to 1 depends on the value of the transition's duration (how it get from 0 to 1 depends on it's "easing" function).

fro more details also check out this tutorial


Related Query