update pattern

<!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)
    	.append('g')
    	.classed('main', true)
    
    	console.log(d3.select('.main').empty())
    
    let data = [
      { key: 'key1', r: 5, x: 30, y: 100, c: 'green' },
      { key: 'key2', r: 15, x: 70, y: 100, c: 'green' },
      { key: 'key3', r: 50, x: 300, y: 100, c: 'green' },
    ];

draw(data);
    
    function draw(data) {
      
      let ref = {};
      
      ref['circles'] = svg.selectAll('.element')
    	.data(data);
      
      console.log('ref', svg.selectAll('.element'))
      
      ref['circles']
      .enter()
    	.append('circle')
    	.merge(ref['circles'])
      .attr("r", d => d.r)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("class", 'element')
      .style("fill", d => d.c);
      
      ref['circles'].exit().remove();
      
	 		
      
    }
     
    let i = 10;
   setInterval(function () {
      data[1].c = `rgb(223, 12, ${i})`;
      
      draw(data);
      
      i += 20;
      
   }, 2000)
    
  </script>
</body>

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