d d d

Looking over some d3 code, I keep seeing .enter() .update() and .exit() as part of the standard workflow. What are these all about?

So in old-school HTML DOM interactions, selections are array-like objects called NodeLists

document.getElementsByTagName('p')
// returns an iterable collection of all the p elements on the page

I appears D3 works in a similar manner, by providing an API into a “selection” of SVG elements.

A key part of D3 is you begin by declaring a relationship to SVG elements that don’t necessarily exist yet.

svg.selectAll("circle")  // returns empty "selection" comparable to DOM NodeList
  .data(myDataVar) // joins the "selection" to your data, returns updated "selection"
  .enter() // provides access to the joined "selection" with a placeholder for each piece of data
  .append('circle') // creates a new element for each data point

In other words: declare a relationship between a selection of SVG elements data and data, then “enter” into that selection and flesh out the details.

Read more here from the author of D3, Mike Bostock.