javascript - d3 选择与 exit() 和 remove() 混淆

Question

因此，我正在研究一些 d3 教程并学习一些关于为什么事情会以它们的方式工作的原因，并且我遇到了一个特殊的选择实例，它没有按预期运行。所以我想知道是否有人可以向我解释一下。

var sales = [
    { product: 'Hoodie',  count: 7 },
    { product: 'Jacket',  count: 6 },
    { product: 'Snuggie', count: 9 },
];

var rects = svg.selectAll('rect')
  .data(sales).enter();

var maxCount = d3.max(sales, function(d, i) {
    return d.count;
});
var x = d3.scaleLinear()
    .range([0, 300])
    .domain([0, maxCount]);
var y = d3.scaleBand()
    .rangeRound([0, 75])
    .domain(sales.map(function(d, i) {
        return d.product;
    }));

rects.append('rect')
    .attr('x', x(0))
    .attr('y', function(d, i) {
        return y(d.product);
    })
    .attr('height', y.bandwidth())
    .attr('width', function(d, i) {
        return x(d.count);
    });  

这一切都很好，生成了 3 个与销售数据相对应的水平条，但这是我看到歧义的地方:

sales.pop();

rects.data(sales).exit().remove();

最后一行应该从视觉中删除弹出的栏，但它不起作用。我认为我遗漏的 d3 选择一定有问题，因为这确实有效:

d3.selectAll('rect').data(sales).exit().remove();

另外，当我找出第一个不起作用的元素时，它似乎确实在退出时选择了正确的元素，但似乎并没有将其删除。无论如何，如果有人能解释这里发生了什么，那将非常有帮助，谢谢!

注意:使用d3 v4

Answer 1

这是您的矩形选择:

var rects = svg.selectAll('rect')
    .data(sales).enter();

所以，当你这样做时:

rects.data(sales).exit().remove();

您正在有效地执行此操作:

svg.selectAll('rect')
    .data(sales)
    .enter()
    .data(sales)
    .exit()
    .remove();

因此，您正在绑定(bind)数据，调用 enter，再次绑定(bind)数据并在所有这些之上调用 exit!哇!

解决方案:只需创建一个常规的、老式的“更新”选择:

var rects = svg.selectAll('rect')
    .data(sales);

这是一个包含您的代码的基本演示，在 2 秒后调用 exit:

var svg = d3.select("svg")

var sales = [{
  product: 'Hoodie',
  count: 7
}, {
  product: 'Jacket',
  count: 6
}, {
  product: 'Snuggie',
  count: 9
}, ];

draw();

function draw() {

  var rects = svg.selectAll('rect')
    .data(sales);

  var maxCount = d3.max(sales, function(d, i) {
    return d.count;
  });
  var x = d3.scaleLinear()
    .range([0, 300])
    .domain([0, maxCount]);
  var y = d3.scaleBand()
    .rangeRound([0, 75])
    .domain(sales.map(function(d, i) {
      return d.product;
    }))
    .padding(.2);

  var rectsEnter = rects.enter().append('rect')
    .attr('x', x(0))
    .attr('y', function(d, i) {
      return y(d.product);
    })
    .attr('height', y.bandwidth())
    .attr('width', function(d, i) {
      return x(d.count);
    });

  rects.exit().remove();

}

d3.timeout(function() {
  sales.pop();
  draw()
}, 2000)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>