D3 Examples - general update parttern

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>general update pattern</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0 px; }
  </style>
</head>
​
<body>
  <svg width='960' height='500'>
    <circle  cx='161', cy='160', r='150', fill='rgba(255,  0, 0, 0.5)'></circle>
  </svg>
  <script>
    function render(data){
      const rects = d3.select('svg')
        .selectAll('.p') //class: .x
        .data(data);
      
      rects
        .exit()
          .remove();
      
      rects
        .enter()
        .append('rect')
          .attr('class', 'p')
          .attr('y', 100)
          .attr('width', 70)
          .attr('height', 300)
          .attr('fill', 'green')
        .merge(rects)
          .attr('x', function(d){ return d; });   
    }
    
    render([50, 108]); //Enter
    render([98, 200]); //Enter + Updata
    //render([]); //Exit
​
  </script>
</body>
​
    