D3 Pie Chart Problems With Exiting Entering

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

Solution 1:

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

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

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