Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pie layout start angle

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

like image 885
Mike Rifgin Avatar asked Dec 10 '13 09:12

Mike Rifgin


People also ask

What should be the total angle in a pie chart?

Since the pie chart is circular, the total angle that corresponds to the entire data set is 360 degrees, which is equal to one entire circular rotation.

What is StartAngle in pie chart?

The StartAngle property determines the angle to draw the segment for first point in pie and doughnut series. Segments for other points are drawn after the previous segment. In other words, StartAngle property determines the angle from which the pie or doughnut series are to be rendered.

What does d3 pie do?

The d3. pie() function takes in our numerical data (share) as values and uses it to generate valuable data to create a pie chart (start angle and end angle ). Using this pie variable, we will make the pie chart.

How will you invoke the arc path generator in d3js?

arc() returns a generator that when called automatically generates and returns a string of characters that can be assigned to the d attribute of a path element to define an arc, circle, or annulus. To create an arc generator simply call d3. arc() . var arcGen = d3.


2 Answers

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.

like image 51
Lars Kotthoff Avatar answered Sep 19 '22 18:09

Lars Kotthoff


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

like image 45
fengshuo Avatar answered Sep 20 '22 18:09

fengshuo