d3.js - .exit（）。remove（）一个组元素不工作 [英] d3.js - .exit().remove() a group element is not working

问题描述

我正在建立一个动态条形图，查看来自肯尼亚和坦桑尼亚的男孩和女孩的考试成绩。用户可以从下拉菜单中选择哪个国家（肯尼亚，坦桑尼亚）以及哪个年份（2010年，2011年）他们希望看到的分数。我已经清理和组织所有的数据到单独的国家年.CSV文件。栏位分成 g 元素，显示特定地区的男孩和女孩的分数。

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 g elements showing, overlapping, the boys' and girls' scores for a specific region.

一切正常，除非，条形图会继续产生自己超过前一个。如果用户先选择肯尼亚2010年，然后选择肯尼亚2011年第二季度，肯尼亚-2011年数据将从现有的肯尼亚-2010年图表中得出。因此 .exit（）。remove（）似乎不起作用。

Everything is working fine, except 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 .exit().remove() doesn't seem to be working.

a href =http://plnkr.co/edit/AmPfwCn5PrlkMEVhzANc?p=preview =nofollow noreferrer> Plunkr here 。

Full code in a 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();

以下是它的外观：

任何帮助表示赞赏;提前感谢。

Any help appreciated; thanks in advance.

推荐答案

@EthanJewett是正确的答案，但真正的代码需要的是一些重组。每当您对现有可视化进行更新并调用 append 时，它必须位于输入选择中。在您的代码中，您重新附加区域，x轴，y轴，标题和子标题的容器元素。

@EthanJewett is on to the right answer but really all your code takes is some restructuring. Anytime you are doing an update to an existing visualization and you call append it must be on an enter selection. In your code, you re-append the container elements for the regions, x axis, y axis, title and sub-titles.

将这些将附加到您的初始画布设置中可以修复您的问题：

Pulling those appends into your initial canvas set-up fixes your problem:

//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（）一个组元素不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！