饼图（甜甜圈）图表段在D3中的顺序 [英] Pie (donut) chart segment order in D3

问题描述

我有一个使用d3和jQuery滑块创建的圆环图，允许用户在不同的数据点之间进行选择。图表动画了数据值之间的转换，一切都很好。

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.

工作js-fiddle： http://jsfiddle.net/kerplunk/Q3dhh/

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

推荐答案

d3会根据值自动排序饼状图。幸运的是，禁用排序是很容易的，只需在 donut 函数上使用 sort（null） / p>

d3 automatically sorts by value for pie charts. Luckily, disabling sorting is quite easy, just use the sort(null) method on thedonut function, i.e.:

var donut = d3.layout.pie().value(function(d){
    return d.itemValue;
}).sort(null);

这里是 fiddle 。

这篇关于饼图（甜甜圈）图表段在D3中的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！