Enter from zero, exit to zero, and slide to the new rank
Every update starts with svg.transition(), one clock shared by the exit, the move and the bars (a transition can be passed to another selection's .transition(t)). The exit rows are removed only after they have faded.
When the data changes, each bar should stay the same element and move to its new place, so the eye can follow it. A key function ties data to elements, join hands out enter, update and exit, and a newer transition always replaces an older one on the same element.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write slideTo(g, rank) that transitions a row g to translate(90, rank * 14) over 300 ms and returns a promise that is true if it finished and false if it was interrupted.
Rows with rides of null should not enter the chart. Where in the second example would you filter them out, and why there?
Explain it without notes
What does object constancy mean, and what gives it in D3?
What happens to a running transition when a newer one starts on the same element?
Why does transition.end() reject, and what should you do?
Preview
Console
Nothing logged yet.Expected console output
January: {"enter":21,"update":0,"exit":0} -> 21 rows
July: {"enter":4,"update":21,"exit":0} -> 25 rows
Lantern kept its element: true | moved from translate(90,56) to translate(90, 0)
January: {"enter":0,"update":21,"exit":4} -> 21 rows (the four new stations left the page)