title: D3.js bar chart animation not exiting correctly
body: <p>I have a bar chart in D3.js where if a user clicks a p tag that says</p>
  
  <blockquote>
    <p>click here to remove bar</p>
  </blockquote>
  
  <p>then it should remove the left most bar. For the animation I would like the bar to fly off to the left of the screen, and then the other bars are placed into their correct position. The problem though that I am running into is that the right most bar chart is getting removed instead, another bar is pushed outside of the graph and no longer able to be viewed, and it looks like the values of the bars are switched. </p>
  
  <p>I created a jsfiddle that is able to recreate this issue: <a href="https://jsfiddle.net/andrewsolis/0k0p2krq/" rel="nofollow">jsFiddle</a></p>
  
  <p>Here is also the javascript code that is executing the creation, and animation for the bar chart: </p>
  
  <pre><code>// chart dimensions
  var margin   = { top: 20, right: 30, bottom: 20, left: 70 },
      width    =  $('#chart').width() - margin.left - margin.right,
      height   =  $(window).height() / 3.5 - margin.top - margin.bottom;
  
  // color palette for graph
  var colors = [ '#4398B5', '#ADC4CC', '#92B06A', '#E09D2A', '#DE5F32' ];
  
  var dataset = [ 100, 200, 300, 400, 500 ];
  
  var xScale = d3.scaleBand()
                 .domain( d3.range( dataset.length ) )
                 .range( [ 0, width ] )
                 .padding( 0.1 );
  
  
  var yScale = d3.scaleLinear()
                 .domain( [ 0, d3.max( dataset )  ] )
                 .range( [ height, 0 ] );
  
  
  var xAxis = d3.axisBottom( xScale );
  var yAxis = d3.axisLeft( yScale );
  
  var svg = d3.select( '#chart svg' )
              .attr( 'width'  , width + margin.left + margin.right  )
              .attr( 'height' , height + margin.top + margin.bottom )
              .append( 'g' )
                  .attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' );
  
  svg.selectAll( 'rect' )
     .data( dataset )
     .enter()
     .append( 'rect' )
         .attr('x', function ( d, i ) {
              return xScale( i );
         })
         .attr( 'width', xScale.bandwidth() )
         .attr('fill', function( d, i ) {
             return colors[ i ];
         })
         .attr( 'y', function( d, i ) {
             return yScale( d );
         })
         .attr( 'height', function( d ) {
             return height - yScale( d );
         });
  
  svg.append( 'g' )
     .attr( 'class', 'yAxis' )
     .attr( 'transform', 'translate(0, ' + (-1) + ')')
     .call( yAxis );
  
  d3.select("p")
          .on("click", function() {
  
              dataset.shift();
              //Update scale domains
              xScale.domain( d3.range( dataset.length ) );
              yScale.domain( [ 0 , d3.max( dataset ) ] );
  
              //Select…
              var bars = svg.selectAll("rect")
                            .data(dataset );
  
              bars.transition()
                  .duration(500)
                  .attr("x", function(d, i) {
                      return xScale(i);
                  })
                  .attr("y", function(d) {
                      return height - yScale(d);
                  })
                  .attr("width", xScale.bandwidth())
                  .attr("height", function(d) {
                      return yScale(d);
                  });
  
              bars.exit()
                  .transition()
                  .duration(500)
                  .attr("x", -xScale.bandwidth())
                  .remove();
              });
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks!</p>