Exit

We've discussed enter and update. We've seen how one determines the starting point of our visualization and the other modifies its attributes based on new data coming in. However, the examples covered had the exact number of data elements with the same properties. What would happen if our new dataset had a different amount of items? What if it has fewer or more?

Let's take the update part of the previous example and modify it a bit to demonstrate what we're talking about (http://localhost:8080/chapter-3/example-5.html). We can explain how this works with two small changes to the rectangles function:

var rectangles = function(svg) {
  var data = makeData((Math.random() * 5) + 1);

Here, we tell the data function to create a random number of data objects:

  var rect = svg.selectAll('rect').data(data);

  // Enter
  rect.enter().append('rect')
    .attr('test', function(d,i) {
      // Enter called 2 times only
      console.log('enter...