D3 Examples - Add elements using .enter and .append.

xxxxxxxxxx
 
<!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>
​
<body>
    <div id="content">
    </div>
​
    <div id="menu">
        <button>do it!</button>
    </div>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var myData1 = ['A', 'B','C', 'D'];
​
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>
    