d3.js - .exit().remove() 组元素不起作用

我正在构建一个动态条形图，查看肯尼亚和坦桑尼亚男孩和女孩的考试成绩。用户可以从下拉菜单中选择他们想要查看哪个国家（肯尼亚、坦桑尼亚）和哪一年（2010 年、2011 年）的分数。我已清理所有数据并将其组织到单独的国家/地区年份 .csv 文件中。这些条形图分组为g显示特定区域男孩和女孩分数重叠的元素。

一切都运转良好，except条形图不断生成自己超过前一个条形图。如果用户首先选择肯尼亚 2010 年，然后选择肯尼亚 2011 年，则将在现有的肯尼亚 2010 年图表上绘制肯尼亚 2011 年数据。所以.exit().remove()似乎不起作用。

完整代码在笨蛋在这里 http://plnkr.co/edit/AmPfwCn5PrlkMEVhzANc?p=preview.

相关代码位如下：

        //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();

它看起来是这样的：

任何帮助表示赞赏；提前致谢。

您每次都会附加一个带有“regions”类的新“g”元素，因此它是空的，并且您的 selectAll(".region") 也是空的，导致每个数据点都在 Enter() 集中。您应该检查是否存在具有“regions”类的元素并选择它而不是附加它。也就是说，从

//Creating groups for regions
regions = svg.select(".regions");
if(regions.empty()) {
  regions = svg.append("g")
    .classed("regions", true);
}