饼(甜甜圈)图分段顺序在D3

Pie (donut) chart segment order in D3

本文关键字：顺序 D3 分段 甜甜圈      更新时间：2023-09-26

我使用d3构建了一个甜甜圈图表，其中包含一个jQuery滑块，允许用户在不同的数据点之间进行选择。图表显示了数据值之间的转换，一切正常。

问题:片段总是呈现逆时针大小顺序(从最大到最小)。这意味着分段会根据其大小在图表中切换位置。

这种行为让用户感到困惑，但不幸的是，我不知道如何改变它。我希望片段保持在它们的初始位置。

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

d3自动按值对饼状图进行排序。幸运的是，禁用排序非常容易，只需在donut函数上使用sort(null)方法，即:

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

给你一把小提琴

在d3 V4中这也是有效的语法(没有.layout):

d3.pie()
  .value(function(d) { return d.value; })
  .sort(null)
相关文章：