Question

我有一张包含已过滤数据的表格，但我现在正在尝试制作相应的条形图。条形图由每个条形图组成，其中包含两个文本元素和一个矩形。退出选择成功删除了g元素，但内部rect和text以某种方式结束于另一个g。

function updateSvg(data) {

parameters.svg = d3.select(".svg")
    .attr("height", data.length * parameters.barHeight)

var life_expectancy = d3.extent(data.map(getter('life_expectancy')));
  var min = life_expectancy[0];
  var max = life_expectancy[1];

var x = d3.scale.linear()
.domain([0, max])
.range([0, parameters.svgWidth])

// Data join.
var groups = parameters.svg.selectAll("g")
  .data(data)

// Enter. 
var groupsEnter = groups.enter().append("g").attr("transform", function(d, i) { return "translate(0," + i * parameters.barHeight + ")"; })

// Update.
var bars = groups.append("rect")
.attr("width", function(d) { return x(d.life_expectancy)})
.attr("height", parameters.barHeight - 1)

var labels = groups.append("text")
.attr("x", 20)
.attr("y", parameters.barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.name; })

var values = groups.append("text")
.attr("x", function(d) { return x(d.life_expectancy) - 50; })
.attr("y", parameters.barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.life_expectancy})

// Exit.
groups.exit().remove()
}

这是我迄今为止所做的工作：http://chrisdaly.github.io/D3/World%20Countries%20Rank/table.html。例如，如果您取消除大洋洲以外的所有大陆并检查条形图，它会显示隐藏在正确大小之下的一吨不同的等等。任何指导表示赞赏！

Answer 1

问题出在这里

groups.exit().remove()

在滑块运动中，country数组中的值将会更改，但g group DOM将不会被删除，因为数组仍具有相同数量的数组元素。所以在那个g组中，你继续添加rect和text。

groups.append("rect")
.attr("width", function(d) { return x(d.life_expectancy)})
.attr("height", parameters.barHeight - 1)

现在当你勾选美国时，美国的g标签会退出退出功能。原因：您的数组已过滤，没有美国记录。

但是，对于亚洲国家和其他人来说，你再次附加文本和矩形，因此它不断增长。

最好的方法是当你更新时执行此操作以删除所有的矩形和文本：

groups.selectAll("text").remove();
groups.selectAll("rect").remove();

d3组中的元素未被正确删除

1 个答案: