javascript - 退出进入的d3饼图问题

Question

在使用 D3js 中的 enter、update、exit 方法制作了几个条形图之后，我想尝试用饼图做同样的事情。我以为我正确应用了选择，但饼图不会用 JSON 中的新数据更新。我在网上查找了类似的示例，但找不到涉及 .on("click" 方法的示例。我希望用户使用圆环图比较人类和动物的生命周期。我是现在正在尝试通过动物数据库实现搜索工具。

下面是查询 Goat 的数据对象:

[{"Animal":"Male","Life_Span":73},{"Animal":"Goat","Life_Span":10}]

我在处理这段代码时遇到了问题:

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.Life_Span; });
//code for accessing data, etc
//enter remove selections
  var path = svg.selectAll("path")
      .data(pie(newdata))
  var enterdata = 
      path.enter().append("path")
      .attr("d",arc)

  path.exit().remove()
  enterdata.exit().remove()

我在 Plunkr 上发布了完整的代码:http://plnkr.co/edit/3QSAPxQpju63tIXRd9p7?p=preview

学习 d3js 几个星期后，即使阅读了很多关于该主题的教程，我仍然在为进入、更新退出选择而苦苦挣扎。我真的很感激任何帮助。谢谢

Answer 1

在 D3 v4.x 中，您需要合并更新并输入选择:

var enterdata = path.enter()
    .append("path")
    .merge(path)
    .attr("d",arc)

您不需要退出选择，因为您的数据数组始终有 2 个对象:除了第一次，您的进入选择始终为 0，您的退出选择始终为 0。

我冒昧地根据索引为路径涂上不同的颜色:

.attr("fill", (d,i) => i ? "teal" : "brown");

这是您更新的插件:http://plnkr.co/edit/l6OzmxVfid9Cj7iv7IMg?p=preview

PS:你的代码有一些问题，我不会改变(这里我只回答你的主要问题)，但我认为你应该考虑一下:

1. 不要混用 jQuery 和 D3。没有 jQuery 你可以在这里做任何事情
2. 不要在用户每次选择动物时都加载所有 CSV。这没有意义。取而代之的是，将 click 函数放在 d3.csv 函数中(这样，您只需加载一次 CSV)。