我有一个使用d3构建的圆环图,其中包含一个jQuery滑块,允许用户在不同的数据点之间进行选择.该图表为数据值之间的过渡提供了动画,一切都很好.
问题:片段始终以逆时针大小顺序呈现(从最大到最小).这意味着段根据其大小在图表周围切换位置.
这种行为让用户感到困惑,但不幸的是我无法弄清楚如何更改它.我希望细分市场能够保持初始状态.
工作js-fiddle:http://jsfiddle.net/kerplunk/Q3dhh/
我认为问题必须在于实际补间的功能:
// 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) …Run Code Online (Sandbox Code Playgroud)