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

Question

我已经为饼图分配了颜色，效果很好 - 它们完美地遵循从蓝色到红色的搭配。我也想根据切片的顺序对其进行排序，因此我进行了以下替换。

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

尺寸现在处于所需的顺序，但颜色遵循旧的顺序，看起来不正确。我希望最大的切片颜色为红色，最小的切片颜色为蓝色。

请查看fiddle .

Answer 1

首先定义范围，如下所示:

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

工作代码here