Question

When I click on the various hyperlinks to tween my chart: while the pie’s slices are tweening but I cannot figure out how to bring along each slice’s label.

A mostly working JSfiddle is here: http://jsfiddle.net/lukateake/MX7JC/

Thanks in advance for any insights you can provide me. I promise to update the fiddle with whatever solution we discover as I imagine this effect is of interest to a great many D3’ers.

Answer 1

The main issue here is in your updateChart function – while you rebound the data to arcs, you did not do so for sliceLabel: (second line added)

arcs.data(donut(data.pct)); // recompute angles, rebind data
sliceLabel.data(donut(data.pct));

One other small thing – your slice label text selection seems a little bit strange:

var sliceLabel = label_group.selectAll("text.value")

but you are creating no text with class = “value”; this doesn’t really end up affecting much, but might cause problems in other implementations – selectAll(“text”) or selectAll(“text.arcLabel”) might be more appropriate here.

updated fiddle at http://jsfiddle.net/MX7JC/9/