使用d3.js时如何根据x轴修改路径的顺序

Question

我想绘制一个堆叠的面积图，以显示趋势和数值。

例如： 数据：

year,orange,apple
1976,30,20
1980,20,40
1988,50,30

相关代码：

stack = d3.stack()
      .order(d3.stackOrderAscending)
      // .order(order)
      .keys(keys);

series = stack(data);

area = d3
  .area()
  .x(function(d) {
    return xScale(new Date(d.data.year, 0, 1));
  })
  .y0(function(d) {
    return yScale(d[0]);
  })
  .y1(function(d) {
    return yScale(d[1]);
  });

$ele
  .selectAll('path')
  .data(series)
  .enter()
  .append('path')
  .attr('class', 'area')
  .attr('transform', 'translate(' + template.padding + ',0)')
  .attr('d', area)
  .attr('fill', function(d, i) {
    return get_colors(i);
  });

它显示如下：

当前结果 但是我要做的是将最大值放在图形的顶部（根据x轴的值） 因此，类别的顺序将随x轴变化。

我试图定义自己的order函数，但是它只返回一个似乎仅定义一个订单的数组，这意味着该订单不能更改。

希望您能理解我说的话。谢谢！！！