all together now

Putting everything together, consider the three possible outcomes that result from joining data to elements:

1. enter - incoming actors, entering the stage.
2. update - persistent actors, staying on stage.
3. exit - outgoing actors, exiting the stage.

When we use the default join-by-index, either the enter or exit selection will be empty (or both): if there are more data than elements, the extra data are in the enter selection; if there are fewer data than elements, the extra elements are in the exit selection. However, by specifying a key function to the data operator, we can control exactly how data is bound to elements. And in this case, we have both enter and exit.

var circle = svg.selectAll("circle")
      .data([32, 57, 293], String);
  
  circle.enter().append("circle")
      .attr("cy", 90)
      .attr("cx", String)
      .attr("r", Math.sqrt);
  
  circle.exit().remove();
  

Want to learn more about selections and transitions? Read A Bar Chart, Part 2 for a practical example of using enter and exit to display realtime data.