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:

/

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...

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/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...

• javascript
• d3.js

2 Answers 2

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 puting 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.

The reason why your pie finishes 90 degrees short is that the default endAngle for a pie layout is 2π, that also explains why the 'hack' you mentioned is working (add angle to endAngle so that endAngle-startAngle = 2π).

The solution described by @Lars (change settings of d3.svg.arc()) should be sufficient for most cases. But if there is more element on the pie chart, for instance, labels with polygon lines, then you have to change settings of d3.layout.pie() instead of d3.svg.arc() since the label lines rely on d.startAngle and d.endAngle calculated by d3.layout.pie().