d3.js - exit() 上的 rect 没有被删除答案

【问题标题】：d3.js - rect on exit() is not being removedd3.js - exit() 上的 rect 没有被删除
【发布时间】：2018-11-28 10:43:44
【问题描述】：

问题： Rect 被放置在出口处（通过调试确认），但在调用 exit().remove() 时它没有被删除。

我正在学习 d3.js，我正在尝试使用下面的 json 数据开发一个简单的动态条形图。我的目标是在数据集之间切换，并使条形图适应我传递的值，并根据需要创建或删除条形图。

var data = [
  {
    "year": "201801",
    "clients": 155,
    "trans": 344
  },
  {
    "year": "201802",
    "clients": 178,
    "trans": 334
  } 
];

var jsonTwo = [
  {
    "year": "201801",
    "clients": 155,
    "trans": 344
  },
  {
    "year": "201802",
    "clients": 178,
    "trans": 334
  },
  {
    "year": "201803",
    "clients": 191,
    "trans": 874
  }
];

当我创建第一组条时，一切都很好。当我更新到第二组时，会创建第三个栏。当我切换回第一组数据时会出现问题：第三个条没有被删除。我在每次转换时调试了 enter() 和 exit() 的大小，获得了以下值，这让我相信这工作正常：

Number of blocks on enter: 2
(index):116 Number of blocks on exit: 0
(index):158 Number of blocks on enter: 1
(index):159 Number of blocks on exit: 0
(index):115 Number of blocks on enter: 0
(index):116 Number of blocks on exit: 1
(index):158 Number of blocks on enter: 0
(index):159 Number of blocks on exit: 0

条形图在下面的代码中进行了更新，这使我排除了将矩形附加到错误位置的可能性：

    bar.data(jsonTwo).enter().append("rect")
    .attr('class','bar')
    .attr('id','alt')
    .attr("x", function (d) {return x(d.year); })
    .attr("y", function (d) {return y(d.trans); })
    .attr("height", function (d) {return height - y(d.trans)})
    .attr("width", x.bandwidth()*0.5)
    .attr("transform",
      "translate(" + ( x.bandwidth()*0.25) + "," + margin.top + ")")
    .on('mouseenter', function() {
        d3.select(this).transition().duration(100).attr('opacity',0.5).attr('color', 'orange')})
    .on('mouseleave', function() {
        d3.select(this).transition().duration(100).attr('opacity',1)})
    .on('click', function() {default_show(data)});
   console.log("Number of blocks on enter: " + bar.data(jsonTwo).enter().size());
    console.log("Number of blocks on exit: " + bar.data(jsonTwo).exit().size());
    bar.exit().remove();
      bar.transition()
        .duration(750)
        .attr("y", function(d) {
          return y(d.trans);
        })
        .attr("height", function(d) {
          return height - y(d.trans);
        }

完整代码的JSFiddle：https://jsfiddle.net/emfqpho9/5/

如果您认为有必要或部分问题，也可以随时就代码结构提供反馈。毕竟我对此很陌生，每一个建议都是学习的机会。

谢谢！

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

看起来您在bar = svg.selectAll("rect") 上调用了.exit()（第89 行），这不是数据连接（它只是一个选择）。因此，您应该将其替换为 bar = svg.selectAll("rect").data(data)。我不确定这是否完全解决了您的问题，但这是我注意到的第一件事。

【讨论】：

确实是这个问题！谢谢！