General Update Pattern Notes

<!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>

// Feel free to change or delete any of the code you see in this editor!
    function render(data){
      // Managing one thing
      var svg = d3.select("body")
        .selectAll("svg")
        .data([null]);

svg = svg
        .enter()
        .append("svg")
          .attr("width", 960)
          .attr("height", 500)
        .merge(svg); // merge enter, update selections, reasign svg into the merged selection
      
      var rects = svg//d3.select("svg")
        .selectAll("rect")
        .data(data);
      	//	.attr("cx", function (d) { return d; })
      	//	.attr("fill", "orange");
      rects
      	.exit()
      	.remove();
      rects
      	.enter()
      	.append("rect")
      		.attr("x", function(d) { return d; })
      		.attr("y", 100)
      		.attr("width", 70)
      		.attr("height", 300)
      		.attr("fill", "green")
      	.merge(rects) // so the cx applies to all rects (both new and old)
      		.attr("cx", function(d){ return d; });
    }
    
    // test cases (enter, update, exit)
    render([100]);
    render([300, 500, 700, 800, 880]);
    //render([300, 500]);
    render([]);
    
   // render([200, 400, 600, 800]);

</script>
</body>

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