ユーザーが異なるデータポイントを選択できるjQueryスライダーを備えたd3を使用して作成したドーナツチャートがあります。チャートはデータ値間の遷移をアニメーション化し、すべてが順調です。
問題:セグメントは常に反時計回りのサイズ順 (最大から最小) でレンダリングされます。これは、セグメントがサイズに応じてチャート上で位置を切り替えることを意味します。
この動作はユーザーを混乱させますが、残念ながら変更方法がわかりません。セグメントを最初の位置にとどめたいと思います。
作業中の 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) {
var b = i(t);
return arc(b);
};
}