14

我有一个使用 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) {
    var b = i(t);
    return arc(b);
  };
}
4

2 回答 2

37

d3 自动按饼图的值排序。幸运的是，禁用排序非常简单，只需使用函数sort(null)上的方法donut，即：

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

这是一个小提琴。

于 2013-06-18T14:07:02.160 回答
4

在 d3 V4 中，这也是有效的语法（没有.layout）：

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