14

ユーザーが異なるデータポイントを選択できる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);
  };
}
4

2 に答える 2

4

d3 V4 では、これも有効な構文です ( なし.layout):

d3.pie()
  .value(function(d) { return d.value; })
  .sort(null)
于 2019-09-13T09:01:36.187 に答える