Question

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

一切正常，除了条形图继续生成前一个。如果用户首先选择肯尼亚2010，然后选择肯尼亚2011年第二，那么肯尼亚 - 2011年的数据将覆盖现有的肯尼亚 - 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();

这是它的样子：

enter image description here

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

Answer 1

你追加一个新的＆＃39;具有班级＆＃39;地区的元素＆＃39;每次都是空的，你的selectAll（＆＃34; .region＆＃34;）也是空的，导致每个数据点都在enter（）集中。你应该检查一个元素是否具有类＆＃34; region＆＃34;存在并选择它而不是附加它。也就是说，从

开始

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

Answer 2

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

将appends拉入初始画布设置可以解决您的问题：

//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（）组元素不起作用

2 个答案: