Adding new segments to a Animated Pie Chart in D3.js

Question

I am unable to add a segment to a D3.js pie chart. I know I need to use .enter() and .append() to stage the new data -- but I am not sure how to apply that when I have the arcs grouped (which I need for the labels).

Here is my update function:

var updateChart = function(dataset) {
  arcs.data(donut(dataset));
  arcs.transition()
    .duration(duration)
    .attrTween("d", arcTween);
  sliceLabel.data(donut(dataset));
  sliceLabel.transition()
    .duration(duration)
    .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
    .style("fill-opacity", function(d) {
      if (d.value === 0) { return 1e-6; }
      else { return 1; }
    });
};

How I setup the initial graph:

var arc = d3.svg.arc()
  .innerRadius(radius * .4)
  .outerRadius(radius);
var svg = d3.select("body")
  .append("svg")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var arc_grp = svg.append("g")
  .attr("class", "arcGrp")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
var label_group = svg.append("g")
  .attr("class", "lblGroup")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

var arcs = arc_grp.selectAll("path")
  .data(donut(data));
arcs.enter()
  .append("path")
  .attr("stroke", "white")
  .attr("stroke-width", 0.8)
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", arc)
  .each(function(d) { return this.current = d; });

var sliceLabel = label_group.selectAll("text")
  .data(donut(data));
sliceLabel.enter()
  .append("text")
  .attr("class", "arcLabel")
  .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
  .attr("text-anchor", "middle")
  .style("fill-opacity", function(d) {
    if (d.value === 0) { return 1e-6; }
    else { return 1; }
  })
  .text(function(d) { return d.data.label; });

Complete jsfiddle: http://jsfiddle.net/kPM5L/

What is a clean way to add the new data to the chart?

Answer 1

To get the transition to work smoothly, you need to add the code that you're using initially to your update function as well. Working jsfiddle here.

And some code to make SO happy -- this is what needs to be in the update function as well:

.enter()
.append("path")
.attr("stroke", "white")
.attr("stroke-width", 0.8)
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.each(function(d) { return this.current = d; });

.enter()
.append("text")
.attr("class", "arcLabel")
.attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
.attr("text-anchor", "middle")
.style("fill-opacity", function(d) {
  if (d.value === 0) { return 1e-6; }
  else { return 1; }
})
.text(function(d) { return d.data.label; });