D3 Examples - Enter, Exit, Update

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .country circle{
      fill-opacity:.1;
      stroke:black;
      stroke-width:1px;
        }
    .highlight circle{
      stroke:red;
      stroke-width:2px;
    }
    .country text{
        font-size:10px;
    }
​
    .axis .tick line{
      stroke:rgb(150,150,150);
    }
​
    .axis .tick line{
      stroke-width:.5px;
    }
    
    .canvas{
      width:100%;
      min-height:600px;
        }
  </style>
</head>
​
<body>
  <div class="container">
    <div class="btn-group">
        <a href="#" class="btn btn-primary" id="array-1">Array 1</a>
        <a href="#" class="btn btn-primary" id="array-2">Array 2</a>
        <a href="#" class="btn btn-primary" id="array-3">Array 3</a>
    </div>
    <section class="canvas" id="canvas">
    </section>
</div>
  
  <script>
        var m = {t:50,r:50,b:50,l:50};
        var outerWidth = document.getElementById('canvas').clientWidth,
            outerHeight = document.getElementById('canvas').clientHeight;
    var w = outerWidth - m.l - m.r,
        h = outerHeight - m.t - m.b;
    
    var plot = d3.select('.canvas')
        .append('svg')
        .attr('width',outerWidth)
        .attr('height',outerHeight)
        .append('g')
        .attr('transform','translate(' + m.l + ',' + m.t + ')');
    
    var arr1 = [
        {id:"red",value:23},
        {id:"blue",value:50}
            ];
​
    var arr2 = [
        {id:"purple",value:50},
        {id:"red",value:23},
        {id:"blue",value:50}
            ];
​
    var arr3 = [
        {id:"purple",value:50},
        {id:"red",value:23},
        {id:"green",value:50},
        {id:"yellow",value:20}
            ];
    
    d3.select('#array-1').on('click',function(){ show(arr1);});
    d3.select('#array-2').on('click',function(){ show(arr2);});
    d3.select('#array-3').on('click',function(){ show(arr3);});
    
    function show(arr){
      var updateSet = plot.selectAll('circle')
        .data(arr, function(d){return d.id}) //update
        .style('stroke', 'none');
      
      var enterSet = updateSet.enter()
        .append('circle') //enter
        .attr('r', 100)
        .style('stroke', 'black')
        .style('stroke-width', '10px');
      
      var exitSet = updateSet.exit()
        .transition().attr('r',0).remove(); //exit
      
      updateSet
        .merge(enterSet)
        .style('fill', function(d){return d.id;})
        .attr('cy', h/2)
        .transition()
        .attr('cx', function(d,i){return i*100})
        .attr('r',20)
    }
  </script>
</body>
​
    