enterExitUpdate

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .chart {
			background: lightgray;
      border: 1px solid black;
      min-width: 200px;
      min-height: 350px;
    }
  </style>
</head>
<div class="chart">
  <div>Billy</div>
  <div>Cindy</div>
  <div>Walter</div>
</div>
<body>
  <script>
    const scores = [
      { name: 'Alice', score: 96 },
      { name: 'Billy', score: 83 },
      { name: 'Cindy', score: 91 },
      { name: 'David', score: 96 },
      { name: 'Emily', score: 88 }
    ];
    // returns update data and elements
    const update = d3.select('.chart')
    	.selectAll('div')
    	.data(scores, function(d) {
				return d ? d.name : this.innerHTML;
      })
    	.style('color', 'red');
    
    const enter = update.enter()
    	.append('div')
    	.text(d => d.name)
			.style('color', 'green');
    
    update.exit().remove();
    
    // select both update and enter selections
    update.merge(enter)
    	.style('width', d => d.score + 'px')
    	.style('height', '50px')
    	.style('background', 'lightgreen')
    	.style('border', '1px solid black');

</script>
</body>

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