This animation demonstrates the benefit of setting pie.padAngle directly: the relative areas of arcs are preserved. Setting arc.padAngle instead disproportionately affects small arcs, introducing bias.
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="//d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
<script>
var data = [1, 1, 2, 3, 5, 8, 13, 21];
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var width = canvas.width,
height = canvas.height,
outerRadius = height / 2 - 30,
innerRadius = outerRadius / 3;
var arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.context(context);
var pie = d3.pie();
var ease = d3.easeCubicInOut,
duration = 2500;
d3.timer(function(elapsed) {
var t = ease(1 - Math.abs((elapsed % duration) / duration - 0.5) * 2),
arcs = pie.padAngle(0.06 * t)(data);
context.save();
context.clearRect(0, 0, width, height);
context.translate(width / 2, height / 2);
context.beginPath();
arcs.forEach(arc.padAngle(0));
context.lineWidth = 1;
context.strokeStyle = "#777";
context.stroke();
context.beginPath();
arcs.forEach(arc.padAngle(0.06 * t));
context.fillStyle = "#ccc";
context.fill();
context.lineWidth = 1.5;
context.lineJoin = "round";
context.strokeStyle = "#000";
context.stroke();
context.restore();
});
</script>