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

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

PS ：您的代码中存在一些问题，我不会改变（这里我只回答您的主要问题），但我认为您应该考虑一下：

不要混用jQuery和D3。你可以在没有jQuery的情况下完成所有事情
每次用户选择动物时，请勿加载所有CSV。这没有意义。而不是那样，将click函数放在d3.csv函数中（这样，只加载一次CSV）。

d3饼图退出进入的问题

1 个答案: