Pie (donut) chart segment order in D3

13
votes

I have a donut chart built using d3 with a jQuery slider that allows a user to select between different data-points. The chart animates the transition between data values and all is well.

The problem: The segments always render in anti-clockwise size order (from largest to smallest). This means that segments switch their position around the chart depending on their size.

This behaviour is confusing for users, but unfortunately I can't work out how to change it. I would like the segments to stay in their initial position.

Working js-fiddle: http://jsfiddle.net/kerplunk/Q3dhh/

I believe the problem must lie in the function which does the actual tweening:

// Interpolate the arcs in data space.
function pieTween(d, i) {
  var s0;
  var e0;
  if(oldPieData[i]){
    s0 = oldPieData[i].startAngle;
    e0 = oldPieData[i].endAngle;
  } else if (!(oldPieData[i]) && oldPieData[i-1]) {
    s0 = oldPieData[i-1].endAngle;
    e0 = oldPieData[i-1].endAngle;
  } else if(!(oldPieData[i-1]) && oldPieData.length > 0){
    s0 = oldPieData[oldPieData.length-1].endAngle;
    e0 = oldPieData[oldPieData.length-1].endAngle;
  } else {
    s0 = 0;
    e0 = 0;
  }
  var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
  return function(t) {
    var b = i(t);
    return arc(b);
  };
}
2
javascriptd3.jspie-chartdonut-chart

2 Answers

34
votes

d3 automatically sorts by value for pie charts. Luckily, disabling sorting is quite easy, just use the sort(null) method on thedonut function, i.e.:

var donut = d3.layout.pie().value(function(d){
    return d.itemValue;
}).sort(null);

Here's a fiddle.

4
votes

In d3 V4 this is also valid syntax (without the .layout):

d3.pie()
  .value(function(d) { return d.value; })
  .sort(null)