enter

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Data join with array of objects</title>
</head>

</style>

<div id='enters'>
    <div></div>
  </div>
  <button onClick="doEnter();">hier kan je dingen mee toevoegen </button>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>

var cities = [
  { name: 'London', population: 8674000},
  { name: 'New York', population: 8406000},
  { name: 'Sydney', population: 4293000},
  { name: 'Paris', population: 2244000},
  { name: 'Beijing', population: 11510000}
];

// Join cities to rect elements and modify height, width and position
d3.selectAll('rect')
  .data(cities)
  .attr('height', 19)
  .attr('width', function(d) {
    var scaleFactor = 0.00004;
    return d.population * scaleFactor;
  })
  .attr('y', function(d, i) {
    return i * 20;
  });

// Join cities to text elements and modify content and position
d3.selectAll('text')
  .data(cities)
  .attr('y', function(d, i) {
    return i * 20 + 13;
  })
  .attr('x', -4)
  .text(function(d) {
    return d.name;
  });

d3.selectAll('circle')
	.data(cities)
	.attr('r',function(d) {var scaleFactor = 0.0000009;return d.population*scaleFactor})
	.attr('cy',function(d,i) {return i*20+10})
	.attr('cx',-50)

//add divs with enter and use population to add text
function doEnter() 
    {d3.select('#enters').selectAll('div')
  .data(cities).enter()
  .append('div')};
    
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js