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();

无论如何，这将删除FranceS2012类的所有圈子。

Answer 2

您的案例中的权宜之计是简化数据的删除：

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

我已经在您的仓库中分叉并链接到raw blocks.org视图：http://bl.ocks.org/peterbsmith2/raw/00f64ff11dd07277ef25/ enter link description here

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

2 个答案: