d3.js - 在 d3 中，构造 .data([]).exit().remove() 是什么意思？

Question

我假设 .selectAll('.my_class').data([]).exit().remove() 作为 d3 调用链的一部分使用 css 删除非数据绑定(bind)元素class my_class 但语法让我感到困惑。目的是简单地清理甲板，移除所有元素。

无法解析。

Answer 1

如果您还不了解输入/更新/退出和数据绑定(bind)，则很难解释。我会尽力提供帮助。这个页面也应该解释很多，特别是进入和退出部分。

http://bost.ocks.org/mike/circles/

让我们从进入开始。如果我们假设您有一个不包含圆形元素的 svg 元素，我们可以像这样添加 4:

svg.selectAll('circle')
  .data([32, 57, 112, 293])
  .enter()
  .append('circle')
  .attr('r', function(d) { return Math.sqrt(d); });

它所做的是选择 svg 元素中的所有圆元素(我们说没有)并将数据绑定(bind)到它们。由于数据数组中有 4 个元素，d3 计算出有 4 个元素要添加。对 .enter() 和 .append('circle') 的调用将这些元素变为现实，而对 .attr('r', function (d) { return Math.sqrt(d); }); 将它们的半径设置为绑定(bind)数据值的根。

现在让我们回答你的问题。我们现在有 4 个圆形元素，每个元素都有与之关联的绑定(bind)数据。如果我们用一个由 4 个整数组成的不同数组再次运行上面的代码，则不会添加新的圆圈。原因是选择了 4 个圆圈，传入了一个长度为 4 的数组，因此净差为 0。然而，确实发生的是新数据将绑定(bind)到圆圈元素。 IE。圆的半径会改变。

如果我们要运行这个会怎样:

svg.selectAll('circle')
  .data([])
  .exit()
  .remove()

我们正在选择 4 个圆，为它们绑定(bind)一个空数组，这意味着有 4 个太多的圆元素。 .enter() 选择包含要添加的额外元素，而 .exit() 选择包含要删除的元素。

因此，我们选择 4 个圆圈，不绑定(bind)任何东西，调用包含所有 4 个圆圈的 .exit()，然后删除它们。

您假设它清除了甲板，从页面中删除了类为“my_class”的所有内容，这是正确的。

希望对您有所帮助。