d3.js

Question

我正在构建一个动态条形图，查看肯尼亚和坦桑尼亚男孩和女孩的考试成绩。用户可以 select，从下拉菜单中，他们希望查看哪个国家（肯尼亚、坦桑尼亚）和哪一年（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

你每次都用 class 'regions' 附加一个新的 'g' 元素，所以它是空的，你的 selectAll(".region") 也是空的，导致每个数据点都在 enter() 集合中。您应该检查 class "regions" 的元素是否存在并且 select 它而不是附加它。也就是说，从

开始

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

Answer 2

@EthanJewett 给出了正确的答案，但实际上您的所有代码都需要进行一些重组。任何时候您正在对现有可视化进行更新并调用 append 它必须在输入选择上。在您的代码中，您 re-append 区域的容器元素、x 轴、y 轴、标题和 sub-titles。

将那些 appends 拉入您的初始 canvas set-up 可以解决您的问题：

//canvas
var svg = d3.select("body")
  .append("svg")
  .attr("width", w + margin.left + margin.right)
  .attr("height", h + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//creating groups for regions
var regions = svg.append("g")
  .classed("regions", true);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickSize(.1);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "rotate(-90)")
  .attr("transform", "translate(0," + h + ")")

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(.5)
  .ticks(7);

svg.append("g")
  .attr("class", "y axis")

var title = svg.append("text")
  .attr("class", "title")
  .attr("dx", (w - 300) + "px")
  .attr("dy", ".71em");

var subtitle = svg.append("text")
  .attr("class", "subtitle")
  .attr("dx", (w - 200) + "px")
  .attr("dy", "50px");

function viz() {
   ....

这是一个修正 plunker。

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

d3.js - .exit().remove() a group element is not working