general update patterns - svg

forked from xidag's block: general update patterns - svg

<!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>
  
 
  <script>
    function render(data){
      svg = d3.select('body').selectAll('svg').data([null]);
      // because svg is a constant variable, so we don't need to define it with const.
      svg = svg.merge(svg.enter().append('svg')
          .attr('width', 871)
          .attr('height', 297));
      
      const rects = svg.selectAll('.p') //class: .x
        .data(data);
      
      rects
        .merge(rects.enter().append('rect')
          .attr('class', 'p')
          .attr('y', 100)
          .attr('width', 70)
          .attr('height', 2000)
          .attr('fill', 'green'))
          .attr('x', function(d){ return d; });  
      
      rects
        .exit().remove();
    }
    
    render([80, 162]); //Enter
    //render([51, 126, 200]); //Enter + Update
    //render([3]); //Exit

</script>
</body>

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