d3退出函数不删除组的第一个元素

Question

我目前正在学习 d3.js，但在尝试删除我创建的所有圈子时遇到了问题。我浏览了论坛帖子并确定您应该在数据中有一个函数可以匹配进入和退出，但是我似乎没有让它正常工作。

基本上我的所有圈子都被删除了，除了一个，它似乎是我选择的第一个。我在 blocks.org 上创建了一个 Gist。如果您想逐步重新创建它，我已经放置了一些断点，因此您只需要启动开发人员工具并查看退出函数前后发生的情况。

代码摘要如下：

输入函数：

d3.select("svg")
.selectAll("circle.FranceS2012")
.data(FranceS2012)
.enter().append("circle")
.attr("class","FranceS2012")
.attr("cx", function(d){
  return x_scale(d.values["MonthYear"]);})
.attr("cy", function(d){return y_scale(d.values["Mean_Odds"]);})
.attr("r",function(d){ return d.values["Count"] / 20;})
.style("fill","#1b9e77");

退出函数：

d3.select("svg")
.selectAll("circle.FranceS2012")
.data(FranceS2012, function(d){
  return d;})
.exit().remove();

这可能是一个新手问题，但我真的无法解决它

非常感谢您的帮助和时间

Answer 1

我可能只是误解了这个问题，但基本上，无论如何，你都想摆脱所有的圈子？

因为如果您使用 select().data().exit().remove() 模式，您将删除数据函数中的元素。要分解它，在处理数据和 D3 时应始终牢记两点：我的数据包含多少个元素，其次，代表该数据的 DOM 中有多少个元素？在此基础上，使用enter()和exit()函数的结果会更加清晰。

如果您的数据数组包含 5 个元素并且您想用圆圈表示它们而您的 DOM 不包含任何圆圈，您将使用 enter() 函数，它将附加 5 个圆圈，因为您将 5 个项目作为数据传递。

你在这里做的可能是相反的。假设您的 DOM 中有 5 个圆圈，但是您的数据发生了变化，您的数据数组中突然只剩下 1 个元素。如果您使用 .exit() 函数，D3 将从您的 DOM 中删除 4 个圆圈 (5 - 1)。还有更多内容，但我建议阅读更多有关 enter() 和 exit() 函数的信息。我怀疑你的数据变了，你只剩下一个元素了，但我不确定。

而且我觉得你想摆脱所有的圈子，你的数据是无关紧要的？如果是这种情况，您可以执行以下操作：

d3.selectAll("circle.FranceS2012").remove();

这将删除所有带有 class FranceS2012 的圆圈，无论如何。

Answer 2

您的情况的权宜之计是简化数据删除：

d3.selectAll("circle.FranceS2012").remove();

我已经将你的存储库和 link 分叉到原始 blocks.org 视图：http://bl.ocks.org/peterbsmith2/raw/00f64ff11dd07277ef25/enter link description here

d3退出函数不删除组的第一个元素

d3 exit function not removing 1st element of group

exit

d3.js