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

Question

我假设.selectAll('.my_class').data([]).exit().remove()作为d3调用链的一部分删除了带有css类的非数据绑定元素,my_class但语法让我感到困惑.意图是简单地清除甲板,删除所有元素.

无法解析它.

Answer 1

如果您还不了解输入/更新/退出和数据绑定,这很难解释.我会尽力帮忙.这个页面也应该解释很多,特别是进入和退出的部分.

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元素中的所有圆元素(我们说没有)并将数据绑定到它们.由于数据数组中有4个元素,因此d3表示有4个元素需要添加.要将呼叫.enter()和.append('circle')把这些元素变成现实,并调用.attr('r', function(d) { return Math.sqrt(d); });集合他们的半径与绑定的数据的价值的根源.

现在让我们回答你的问题.我们现在有4个圆形元素,每个元素都有与之关联的绑定数据.如果我们使用不同的4个整数数组再次运行上面的代码,则不会添加新的圆圈.原因是选择了4个圆圈,传入了一个长度为4的数组,因此净差为0.但是,新数据将被绑定到圆形元素.即圆的半径将改变.

如果我们运行这个怎么办:

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

我们正在选择4个圆圈,将空数组绑定到它们,这意味着有4个圆形元素.而.enter()选择含有多余的元素的添加,将.exit()选择包含删除的元素.

因此,我们选择4个圆圈,不对它们进行任何绑定,调用.exit(),包含所有4个圆圈,然后删除它们.

你是正确的,假设它清除了套牌,从页面中删除了类'my_class'的所有内容.

希望有所帮助.