d3饼图问题与退出进入 [英] d3 pie chart problems with exiting entering

问题描述

在D3js中使用enter，update，exit方法制作了几个条形图之后，我想用饼图做同样的事情。我想我应用选择正确，但饼图不会更新与JSON中的新数据。我在网上找了类似的例子，但找不到一个涉及一个 .on（click方法，我想让用户比较人类和动物的寿命使用我现在尝试通过动物数据库实现搜索工具。

这里是一个数据对象看起来像查询 Goat ：

[{Animal：Male，Life_Span：73}动物：Goat，Life_Span：10}]

>

  var pie = d3.pie（）
 .sort（null）
 .value（function（d）{ return d.Life_Span;}）; 
 //用于访问数据等的代码
 //输入删除选择
 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 =预览

在学习d3js几个星期后，我仍然在尝试enter，更新退出选择，甚至在阅读了很多教程。我真的很感激任何帮助。感谢

解决方案

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

  var enterdata = path.enter（）
 .append（path）
 .merge（path）
 .attr （d，arc）
  

要了解更多信息， a class ='doc-link'href =http://stackoverflow.com/documentation/d3.js/5749/update-pattern/24929/merging-selections#t=20170108120450721538>合并选择

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

我根据他们的指数对不同颜色的路径进行着色：

  .attr（fill，（d，i）=> i？teal：brown）; 
  

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

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

1. 不要混用jQuery和D3。


2. 每次用户选择动物时，请不要加载所有CSV文件。这没有意义。而不是将点击函数放在 d3.csv 函数中（这样，您只加载一次CSV ）。






After making several bar charts using enter, update, exit method in D3js, I wanted to try the same with a pie chart. I thought I applied selections correctly, but the pie chart won't update with the new data in JSON. I looked for similar examples online, but couldn't find one which involved an .on("click" method. I want users to compare the lifespans of humans and animals using a donut chart. I'm trying to implement the search tool through the database of animals right now.

here's what a data object looks like for the query Goat:

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

I'm having trouble with this code in particular:

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

I posted the full code on Plunkr here: http://plnkr.co/edit/3QSAPxQpju63tIXRd9p7?p=preview

A few weeks into learning d3js, I'm still struggling with enter,update exit selections even after reading many tutorials on the subject. I would really appreciate any help. Thanks

解决方案

In D3 v4.x, you need to merge the update and enter selections:

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

To read more about it, here is an SO documentation example: Merging selections

You don't need an exit selection because your data array has always 2 objects: except for the first time, your enter selection is always 0, and your exit selection is always 0.

I took the liberty of colouring the paths in different colours, according to their indices:

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

Here is your updated plunker: http://plnkr.co/edit/l6OzmxVfid9Cj7iv7IMg?p=preview

PS: You have some problems in your code, which I'll not change (here I'm only answering your main question), but I reckon you should think about them:

1. Don't mix jQuery and D3. You can do everything here without jQuery
2. Don't load all your CSV every time the user chooses an animal. It doesn't make sense. Instead of that, put the click function inside the d3.csv function (that way, you load the CSV only once).

这篇关于d3饼图问题与退出进入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！