Add elements using .enter and .append.

forked from d3indepth's block: Add elements using .enter and .append.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Add elements using .enter and .append</title>
</head>

<style>

#content div {
	display: inline-block;
	margin: 10px;
	background-color: orange;
	color: white;
	width: 40px;
	height: 40px;
}
  
  button:hover{
    cursor: pointer;
  }  
  
  #content div:hover{
    cursor: pointer;
    background-color: blue;
  }
</style>

var myData2 = ['E', 'F'];
    
d3.select("button")
  .on("click", remove)
    
  // do stuff to new elements
	d3.select('#content')
	  .selectAll('div')
	  .data(myData1)
	  .enter()
	  .append('div')
    .style("width", "0px")
    .transition()
    .style("width", "80px");
    
function remove() {
    
  // do stuff to elements you want to remove
  d3.select('#content')
	  .selectAll('div')
	  .data(myData2)
	  .exit()
    .transition()
    .style("width", "0px")
    .remove();
}
  </script>
</body>
</html>

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