Pie layout start angle

d3.js, javascript

Solution

If you set `startAngle` to a static value, it will be the same for all of the pie slices, i.e. they will all start in the same position. For what you're trying to do, you don't actually need to modify the angles of the pie chart layout (as this is what's computing them in the first place), but the angles of the arc generator that is used to draw the segments.

To rotate by 90 degrees for example, do

var arc = d3.svg.arc().outerRadius(r)
            .startAngle(function(d) { return d.startAngle + Math.PI/2; })
            .endAngle(function(d) { return d.endAngle + Math.PI/2; });

Complete jsfiddle here.

Problem

I'm trying to use startAngle for the pie layout in D3 to ensure that the first slice of the pie is always drawn starting a 90 degrees: ``` var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.amount; }) .startAngle(90 * (Math.PI/180)); ``` This works but I'm finding that the pie now finishes 90 degrees short: http://jsfiddle.net/qkHK6/105/ The only way I can figure to fix this is to force the end position like so: ``` .endAngle(450 * (Math.PI/180)) ``` But that seems like a hack. Is there a correct way to do this? The documentation says that using startAngle sets the overall start angle of the pie layout to the specified value in radians So i'd assumed that the rest of the pie would be draw accordingly and match up with where it started...

Original source