d3 remove 和 exit 未正确删除堆叠栏中的项目答案

【问题标题】：d3 remove and exit are not removing items properly in a stacked bard3 remove 和 exit 未正确删除堆叠栏中的项目
【发布时间】：2021-08-10 17:45:40
【问题描述】：

我有一个堆积条形图，可以使用下拉菜单进行更新和过滤。当图表首次呈现时我没有问题，但是当我取消选中某个选项时，矩形不会被删除。

我在删除后检查了数组，它确实从数组中删除了。这里的问题是rect 被移到了最左边。 x 轴确实会更新，并且与该对象关联的文本会被删除。

我的感觉是我的选择有问题，但我很困惑，因为我有代表每个对象的系列的rect 和g。我不确定在删除元素时是否选择了正确的对象。

我的代码：Stacked bar chart with filter

这是删除一项后图表的样子：

如您所见，rect 仍然存在，但移到了左侧。

我已经包含了我的代码的重要部分。任何关于如何使我的代码在 Plunker 上运行的反馈都非常感谢

d3.selectAll("input").on("change", function() {
  var paragraphID = d3.select(this).attr("id");
  paragraphID = String(paragraphID);

  if (this.checked) {
    if (paragraphID === 'A') {
      data.push({
        production_company: "A",
        Pass: 50,
        Fail: 65,
        total: 11
      });
    }
  } else {
    data = data.filter(d => d.production_company !== paragraphID);
  }

  xScale_production.domain(data.map(function(d) {
    return d.production_company;
  }));
  
  yScale_production.domain([0, d3.max(series_production, d => d3.max(d, d => d[1]))]);

  var group = svg_stack_production.selectAll("g").data(series_production);
  var mbars = group.selectAll("rect").data(d => d);

  mbars.enter()
    .append("rect")
    .attr("x", width)
    .attr("y", d => yScale_production(d[1]))
    .attr("width", xScale_production.bandwidth())
    .merge(mbars)
    .attr("x", (d, i) => xScale_production(d.data.production_company))
    .attr("y", d => yScale_production(d[1]))
    .attr("width", xScale_production.bandwidth())
    .attr("height", d => yScale_production(d[0]) - yScale_production(d[1]));

  group.selectAll("g")
    .exit()
    .remove();

  mbars.selectAll("rect").exit().remove()
});

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

在调用exit之前不需要选择元素，它们已经在选择中。只需致电：

group.exit().remove();

mbars.exit().remove();

代替：

group.selectAll("g").exit().remove();

mbars.selectAll("rect").exit().remove();

【讨论】：

这并不能解决问题，但它让我明白这绝对是一个选择问题，因为当我应用你的建议时，轴被删除了。我现在向group 添加了一个类，以确保它不会选择其他g 元素
如果您的问题仍然存在，请提供一个有效的 sn-p 或 fiddle
Plunker 链接现在可以使用。我更改了 d3 版本。
我看到了问题。您加载数据，在其上构建 x 比例和轴，然后在复选框更改时改变数据......您需要做的是：保存加载的数据并使其不可变，每次检查时创建数据的过滤副本或取消选中，然后用过滤后的数据重新绘制整个图表
感谢您的推荐，我已采纳您的建议。我不知道我必须使数据集不可变。但是，我的问题还没有解决，x 轴是唯一被更新的元素。酒吧还在。

【解决方案2】：

我解决了这个问题，这里有两个问题。首先，我需要克隆原始数据，然后按照@Michael Rovinsky 的建议对其应用过滤。其次，过滤数据后需要更新series_production。

这里是工作代码的链接。

Working code

【讨论】：