我有一个使用 d3 和 jQuery 滑块构建的圆环图,允许用户在不同的数据点之间进行选择。该图表动画显示了数据值之间的过渡,一切都很好。
问题:这些段始终按逆时针大小顺序渲染(从最大到最小)。这意味着分段根据其大小在图表中切换其位置。
这种行为让用户感到困惑,但不幸的是我不知道如何改变它。我希望这些部分保持在初始位置。
工作 js-fiddle:http://jsfiddle.net/kerplunk/Q3dhh/ 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) {
var b = i(t);
return arc(b);
};
}
d3 自动按饼图的值排序。幸运的是,禁用排序非常简单,只需使用sort(null)
方法上的donut
函数,即:
var donut = d3.layout.pie().value(function(d){
return d.itemValue;
}).sort(null);
这是一个fiddle http://jsfiddle.net/KsFPh/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)