Edit Question - KnowledgeHub

Title Body

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); }; }

Tags (comma-separated) Cancel