title: d3.js - .exit().remove() a group element is not working
body: <p>I'm building a dynamic bar chart looking at boys' and girls' test scores from Kenya and Tanzania. Users can select, from drop-down menus, which country (Kenya, Tanzania) and which year (2010, 2011) they'd like to see scores from. I've cleaned and organized all the data into separate country-year .csv files. The bars are grouped in <code>g</code> elements showing, overlapping, the boys' and girls' scores for a specific region.</p>
  
  <p>Everything is working fine, <em>except</em> the bar chart keeps generating itself over the previous one. If a user picks Kenya 2010 first, and then Kenya 2011 second, the Kenya-2011 data gets drawn over the existing Kenya-2010 graph. So <code>.exit().remove()</code> doesn't seem to be working.</p>
  
  <p>Full code in a <a href="http://plnkr.co/edit/AmPfwCn5PrlkMEVhzANc?p=preview" rel="nofollow noreferrer">Plunkr here</a>. </p>
  
  <p>The relevant code bits below:</p>
  
  <pre><code>        //Creating groups for regions
          regions = svg.append("g")
            .classed("regions", true);
  
          region = regions.selectAll(".region")
            .data(dataset);
  
          region.enter()
            .append("g")
            .attr("class", "region");
  
          //This transition moves the rects horizontally. 
          //exit().remove() is not working.
          region.transition()
            .duration(1500)
            .attr("transform", function(d) { 
                return "translate(" + x(d.key) + ",0)"; 
              });
  
          region.exit().remove();
  
          rects = region.selectAll("rect")
              .data(function(region) { 
                return region.values;
              });
  
          rects.enter()
              .append("rect")
              .attr("x", 0)
              .attr("width", barWidth);
  
          rects.transition()
              .duration(2000)
              .attr("y", function(region) {
                return y(region.values[0][subject]);
              })
              .attr("height", function(region) { 
                return h - y(region.values[0][subject]);
              })
              .attr("class", function(region) { return region.key; });
  
          rects.exit().remove();
  </code></pre>
  
  <p>Here's what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/NnDeb.png" alt="enter image description here"></p>
  
  <p>Any help appreciated; thanks in advance.</p>