Question

问题： 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

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

    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/

如果您觉得有必要或要解决部分问题，请随时提供有关代码结构的反馈。毕竟，我对此还很陌生，每条建议都是学习的机会。

谢谢！

Answer 1

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

d3.js-出口（）上的矩形未删除

1 个答案: