bind-enter-update-exit

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  <body>

var scale = d3.scale.linear()
        .domain([1, 5])   // Data space
        .range([0, 200]); // Pixel space

var svg = d3.select("body").append("svg")
        .attr("width",  250)
        .attr("height", 250);

function render(data, color){

// Bind data
        var rects = svg.selectAll("rect").data(data);
        
        // Enter
        rects.enter().append("rect")
          .attr("y", 50)
          .attr("width",  20)
          .attr("height", 20);

// Update
        rects
          .attr("x", scale)
          .attr("fill", color);

// Exit
        rects.exit().remove();
      }

setTimeout( function (){ render([1, 2, 2.5],     "red");    }, 1000);
      setTimeout( function (){ render([1, 2, 3, 4, 5], "blue");   }, 2000);
      setTimeout( function (){ render([1, 2],          "green");  }, 3000);
      setTimeout( function (){ render([3, 4, 5],       "cyan");   }, 4000);
      setTimeout( function (){ render([4, 5],          "magenta");}, 5000);

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js