The three groups, one call at a time
The empty array is a normal case, not an error: every element exits and the chart is empty.
The data join pairs each item of an array with one element. Items with no element are the enter group, pairs are the update group, and elements with no item are the exit group. Learn it on plain divs, where nothing else gets in the way.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A <div id="tags"> already holds 4 spans. Write the D3 call that makes it show the names ["Quay", "Market"] with exactly two spans, and say which groups were involved.
Write showCount(data) that logs the sizes of enter, update and exit for a join on li elements in #list, then applies join("li") with the text from the data.
Explain it without notes
What are the enter, update and exit groups? Give the sizes for 3 divs and 5 items.
What does data() store on an element, and where?
What does join("div") do for you that enter().append("div") does not?
Preview
Console
Nothing logged yet.Expected console output
data 3: enter 3, update 0, exit 0
divs now: Quay Market Chapel
data 5: enter 2, update 3, exit 0
divs now: Quay Market Chapel Library Lantern
data 2: enter 0, update 2, exit 3
divs now: Library Lantern
data 0: enter 0, update 0, exit 2
divs now:
data 1: enter 1, update 0, exit 0
divs now: Quay
__data__: Quay