Understanding Enter Update Exit

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var data1 = [1,5,6,3];
    var data2 = [7,2,6,1,8,3,2];
    var data3 = [3,2,4];
    
		rectFunc(data1);
    rectFunc(data2);
    //rectFunc(data3);
    
    function rectFunc(data){

// Bind data
      var rects = svg.selectAll("rect").data(data);

// Enter
      rects.enter().append("rect")
        .attr("y", 50)
      	.attr("x", function(d, i){ return i * 100})
       	.attr("width",  function(d, i){ return d * 10})
        .attr("height", function(d, i){ return d * 10})
      	.attr("fill", "green");
      
      // Update
      rects.attr("fill", "orange")
      .attr("width",  function(d, i){ return d * 10})
        .attr("height", function(d, i){ return d * 10})
      
      // Exit
			rects.exit().attr("fill", "red");
      
    }

</script>
</body>

https://d3js.org/d3.v4.min.js