Javascript 如何在不影响指定颜色顺序的情况下对D3中的数组进行排序

我已经为我的饼图分配了颜色，效果很好——它们从蓝色到红色都很完美。我也想按照他们的顺序来订购切片，所以我做了以下替换

var pie = d3.layout.pie()
  //.sort(null)
  .sort(d3.ascending)
  .value(function (d) { return d["val"]; });

尺寸现在按所需顺序排列，但颜色按旧顺序排列，看起来有误。我希望最大的切片颜色是红色，最小的切片颜色是蓝色

---

请查看。

首先定义如下范围：

var colors = d3.scale.linear()
    .domain([d3.min(data), d3.max(data)])
    .range(["blue", "red"]);

这里，数组中的最小值将对应于蓝色。 在这里，数组中的最大值将对应于红色

根据数据设置路径中的颜色，而不是按照其索引设置，如下所示：

grx.append("path")
  .attr("d", arc)
  .style("fill", function (d, i) {  return colors(d.data);});

---

工作代码首先定义如下范围：

var colors = d3.scale.linear()
    .domain([d3.min(data), d3.max(data)])
    .range(["blue", "red"]);

这里，数组中的最小值将对应于蓝色。 在这里，数组中的最大值将对应于红色

根据数据设置路径中的颜色，而不是按照其索引设置，如下所示：

grx.append("path")
  .attr("d", arc)
  .style("fill", function (d, i) {  return colors(d.data);});

工作代码