d3 pie chart transition with attrtween

Question

i'm trying to somehow sweep in a half-donut-chart, meaning starting with a blank screen the chart starts drawing at -90 degree (or 270) and performs a halfcircle until reaching 90 degree. the code looks like:

var width = 800;
var height = 400;
var radius = 300;
var grad=Math.PI/180;
var data = [30, 14, 4, 4, 5];
var color = d3.scale.category20();
var svg = d3.select("body").append("svg").attr("width", width).attr("height", 
`height).append("g").attr("transform", "translate(" + radius*1.5 + "," + radius*1.5 + 
")");
var arc = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius - 20);
var pie = d3.layout.pie().sort(null);
svg.selectAll("path").data(pie(data)).enter().append("path").attr("d", 
arc).attr("fill", 
function(d, i) { return color(i); }).transition().duration(500).attrTween("d", sweep);

function sweep(a) {
  var i = d3.interpolate({startAngle: -90*grad, endAngle: -90*grad},{startAngle: -90*grad, endAngle: 90*grad});
   return function(t) {
    return arc(i(t));
    };
}

looking at several examples i managed to get the animation, however, i fail at binding (or converting) the data to the arc. my feeling is that there is only one path drawn and then it stops.

if i change the interpolation to start/end -90/90 and a, i get different colors but not all of them. adding the start/end-angle to the pie-var gives me a transition where a one-colored-arc is shown at the beginning and then the other parts slide in (which would be correct if there was no arc at the beginning - the proportions also seem a bit wrong). setting the initial color to white does not help because then everything stays white.

i'm afraid i'm missing an obvious point, but so far i'm stuck, maybe someone can point me in the right direction.

Answer 1

after quite some variations and tests it somehow started to work, using these to lines of code:

var pie = d3.layout.pie().sort(null).startAngle(-90*grad).endAngle(90*grad);

var i = d3.interpolate({startAngle: -90*grad, endAngle: -90*grad},a);

one final "problem" was that the height of the svg was too small and so some segments got cut off, so changing it to

var height = 800;

ended my search. thanks for any considerations.

Answer 2

A small typo on the

var svg = d3.select("body").append("svg").attr("width", width).attr("height", `height)

should be:

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)