Same element, or a rewritten one?
Read the 'July, keyed' line from left to right: element 5 (it was fifth in January) is now first and holds Lantern. By index, element 1 starts showing Lantern.
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, keyed: element 1 = Quay | element 2 = Chapel | element 3 = Clock Tower | element 4 = Library | element 5 = Lantern
July, keyed: element 5 = Lantern | element 1 = Quay | element 3 = Clock Tower | element 2 = Chapel | element 4 = Library
January, by index: element 1 = Quay | element 2 = Chapel | element 3 = Clock Tower | element 4 = Library | element 5 = Lantern
July, by index: element 1 = Lantern | element 2 = Quay | element 3 = Clock Tower | element 4 = Chapel | element 5 = Library