By adding transitions, we can more easily follow the elements as they are entered, updated and exited. Separate transitions are defined for each of the three states.
Note that no transition is applied to the merged enter + update selection; this is because it would supersede the transition already scheduled on entering and updating elements. It's possible to schedule concurrent elements by using transition.transition or by setting transition.id
, but it's simpler here to only transition the x-position on update; for entering elements, the x-position is assigned statically.
Want to read more? Try these tutorials:
This fork shows how using LiveScript improves readability of D3 enter-update-exit pattern.
See the D3 wiki for even more resources.
Previous: Key Functions
I like your simple shuffle. Note it can be written even more compactly as:
Now I think about it your code doesn't actually do what is claimed in the comments. The letters are not kept in alphabetical order. To do so quite simply you can use:
or if like me you don't like parameters hanging about after call-backs: