join() with a function per group, and bad data
A failed data load leaves undefined: the join throws, so the chart is not drawn at all. Guard it where you load the data (Topic 4.2).
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
enter x3, update x0, exit x0 | divs on the page: 3
enter x1, update x3, exit x0 | divs on the page: 4
enter x0, update x1, exit x3 | divs on the page: 4
red exit boxes still there: 3
undefined -> TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
null -> TypeError: Cannot use 'in' operator to search for 'length' in null
5 -> items: 0
"abc" -> items: 3
{} -> items: 0