D3 - 排序堆积条形图

Question

我在this example之后创建了一个堆积条形图。

但是，我想将值从最大值排序到最小值（因此每列中的矩形按大小按降序排列），因此最终结果是这样的（伪代码）：

原始值：零售商1,3.94,1.92,7.14,0.08,0.75，1.42 ,,

排序值：零售商1,714,3.94,1.92,1.42,0.75,0.08 ,,,,

我尝试this没有运气，其他搜索堆积条排序只对整个栏进行排序，而不是栏内的值（like this）。 This非常接近，但我无法正确调整数据集以使其正常运行。

stack.order（d3.stackOrderDescending）改变了条形图，但没有正确地按值排序所有内容。 data.sort（）似乎也不能完成这项任务（因为我将一列与下一列进行比较）。我也试过手动排序CSV，但因为＆＃34;品牌＆＃34;是键，它们最终按字母顺序输出。

如果有人有任何想法或建议，我们将不胜感激。 谢谢你的时间。

下面的Plunkr：

https://plnkr.co/edit/kp1apRjCtNDo9G1FWlJF?p=preview

代码：

var margin = {top: 20, right: 20, bottom: 30, left: 40};

var containerWidth = $('.graph__container').width(),
    containerHeight = $('.graph__container').height(),
    width = containerWidth - margin.left - margin.right,
    height = containerHeight - margin.top - margin.bottom;

var svg = d3.select(".graph__container")
            .append('svg');

svg.attr({
  'width' : width + margin.left + margin.right,
  'height': height + margin.top + margin.bottom
});

var g = svg.append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
          .rangeRound([0, width])
          .padding(0.1)
          .align(0.1);

var y = d3.scaleLinear()
          .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
          .range(["#8648CD", "#D66EC2", "#229ED8", "#2251C3"]);

var stack = d3.stack()
              .order(d3.stackOrderAscending)
              .offset(d3.stackOffsetExpand);

d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.retailer; }));
  z.domain(data.columns.slice(2));

  stacked = stack.keys(data.columns.slice(2))(data);

  var bars = g.selectAll(".bars")
              .data( stacked );

  bars.exit()
      .transition()
      .duration(1000)
      .style('opacity', 0)
      .remove();

  var barEnter = bars.enter()
                     .append("g");

  bars = barEnter.merge(bars)
                 .attr("class", "bars")
                 .attr('data-brand', function(d) { return d.key; })
                 .attr("fill", function(d) { return z(d.key); })
                 .attr('stroke', 'white')
                 .attr('stroke-width', '2px')
                 .style('opacity', 1);

    var rect = bars.selectAll(".rect")
                   .data(function(d) { return d; });

    var rectEnter = rect.enter()
                        .append("rect");

    rect = rectEnter.merge(rect)
                    .attr('class', 'rect');
    rect.exit()
        .transition()
        .duration(1000)
        .style('opacity', 0)
        .remove();

    rect.transition()
        .duration(1000)
        .attr("x", function(d) { return x(d.data.retailer); }) 
        .attr("y", function(d) { return y(d[1]); })
        .attr('data-etailer', function(d) { return d.data.retailer; })
        .attr("height", function(d) {return y(d[0]) - y(d[1]); })
        .attr("width", (x.bandwidth() / 1.2))
        .style('opacity', 1);
});

function type(d, i, columns) {
  for (i = 2, t = 0; i < columns.length; ++i)
    t += d[columns[i]] = +d[columns[i]];
    d.total = t;
    return d;
}