Javascript数组过滤器|自定义方法

Question

我有问题。请看下面的图片。

我的馅饼的数据是：

var data = [{statusid:"Paid", price:10},
            {statusid:"Not accepted", price:20}, 
            {statusid:"Canceled", price:20},
            {statusid:"Waiting", price:1},
            {statusid:"Refunded", price:1},
            {statusid:"Pending", price:1}];

是否可以通过对输入数据进行排序来解决此问题？怎么样？ 谢谢！

P.S：D3.js代码如下：

var data =  [{statusid:"Paid", price:10}, {statusid:"Not accepted", price:20}, {statusid:"Canceled", price:20}, {statusid:"Waiting", price:1}, {statusid:"Refunded", price:1}, {statusid:"Pending", price:1}];

var sumprice = 0;
for (var i in data) {
  sumprice += data[i].price;
}


/* ==============================================================
  Setting up the chart
============================================================== */

var width = 600,
    height = 500,
    radius = Math.min(width, height) / 4;

var color = d3.scale.ordinal()
    .range(["#227fbc",  "#64a620",  "#7b6888",  "#a15c57",  "#961819",  "#d8d13a",  "#d3723b"]);

var arc = d3.svg.arc()
  .outerRadius(radius * 0.8)
  .innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()
  .innerRadius(radius * 0.9)
  .outerRadius(radius * 0.9);

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

/* ==============================================================
  Creating the svg element
============================================================== */

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("g")
  .attr("class", "lines");

svg.append("g")
  .attr("class", "labels");

/* ==============================================================
  Drawning the pizza
============================================================== */

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function(d) {
        return color(d.data.statusid); 
    });

/* ==============================================================
  Drawning the labels
============================================================== */

var key = function(d){ return d.data.statusid; };

var text = svg.select(".labels").selectAll("text")
    .data(pie(data), key);

  text.enter()
    .append("text")
    .attr("dy", ".35em")
    .text(function(d) {
      return d.data.statusid;
    });


  function midAngle(d){
    return d.startAngle + (d.endAngle - d.startAngle)/2;
  }

  text.transition().duration(1000)
    .attrTween("transform", function(d) {
      this._current = this._current || d;
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        var d2 = interpolate(t);
        var pos = outerArc.centroid(d2);
        pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
        return "translate("+ pos +")";
      };
    })
    .styleTween("text-anchor", function(d){
      this._current = this._current || d;
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        var d2 = interpolate(t);
        return midAngle(d2) < Math.PI ? "start":"end";
      };
    });

  text.exit()
    .remove();

/* ==============================================================
  Drawning the inside-labels
============================================================== */

    var arcs = svg.selectAll(".arc");

   // Add a magnitude value to the larger arcs, translated to the arc centroid and rotated.
    arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      //.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
      .attr("transform", function(d) { //set the label's origin to the center of the arc
        //we have to make sure to set these before calling arc.centroid
        d.outerRadius = arc.outerRadius; // Set Outer Coordinate
        d.innerRadius = arc.outerRadius/2; // Set Inner Coordinate
        console.log('omg');
        return "translate(" + arc.centroid(d) + ")";
      })
      .style("fill", "White")
      .style("font", "bold 12px Arial")
      .text(function(d) { return (d.data.price*100/sumprice).toFixed(1)+'%'; });

function angle(d) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
      return a > 90 ? a - 180 : a;
    }

/* ==============================================================
  Drawning the label-lines
============================================================== */

  var polyline = svg.select(".lines").selectAll("polyline")
    .data(pie(data), key);

  polyline.enter()
    .append("polyline");

  polyline.transition()
    .attrTween("points", function(d){
      this._current = this._current || d;
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        var d2 = interpolate(t);
        var pos = outerArc.centroid(d2);
        pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
        return [arc.centroid(d2), outerArc.centroid(d2), pos];
      };      
    });

  polyline.exit()
    .remove();