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

Question

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

一切正常，除了条形图不断生成自己超过前一个。如果用户首先选择 Kenya 2010，然后选择 Kenya 2011，则 Kenya-2011 数据将绘制在现有的 Kenya-2010 图表上。所以 .exit().remove() 似乎不起作用。

Plunkr here 中的完整代码.

相关代码位如下:

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

这是它的样子:

感谢任何帮助；提前致谢。

Answer 1

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

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