Javascript D3-排序堆叠条形图

我已经创建了一个堆叠条形图如下

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

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

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

我尝试了不走运的搜索，而其他对堆叠条排序的搜索只对整个条进行排序，而不对条中的值进行排序（）。非常接近，但我还无法正确调整数据集以使其正常工作

stack.order（d3.stackOrderDescending）更改了条，但没有正确地按值对所有内容进行排序。data.sort（）似乎也不起作用（因为我会将一列与下一列进行比较）。我也尝试过手动排序CSV，但因为“品牌”是键，它们最终会按字母顺序输出

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

请参阅下文：

守则：

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

var-margin={top:20，right:20，bottom:30，left:40}；
var containerWidth=$（'.graph__container'）.width（），
containerHeight=$（'.graph_uucontainer'）。高度（），
宽度=集装箱宽度-margin.left-margin.right，
高度=容器高度-margin.top-margin.bottom；
var svg=d3.select（“.graph\uu容器”）
.append（'svg'）；
svg.attr({
“宽度”：宽度+边距。左侧+边距。右侧，
“高度”：高度+边距.顶部+边距.底部
});
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.1）
.对齐（0.1）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var z=d3.scaleOrdinal（）
.范围（[“#8648CD”、“#D66EC2”、“#229ED8”、“#2251C3”]）；
var stack=d3.stack（）
.订单（d3.StackOrder升序）
.偏移量（d3.stackOffsetExpand）；
d3.csv（“data.csv”），类型，功能（错误，数据）{
如果（错误）抛出错误；
x、 域（data.map（函数（d）{return d.retailer；}））；
z、 域（data.columns.slice（2））；
堆叠=stack.keys（data.columns.slice（2））（数据）；
var bars=g.selectAll（“.bars”）
.数据（堆叠）；
条.出口（）
.transition（）
.持续时间（1000）
.style（'opacity'，0）
.remove（）；
var barEnter=bar.enter（）
.附加（“g”）；
条形=barEnter.merge（条形）
.attr（“类”、“条”）
.attr（'data-brand'，函数（d）{return d.key；}）
.attr（“fill”，函数（d）{返回z（d.key）；}）
.attr（'笔划'，'白色'）
.attr（'stroke-width'，'2px'）
.style（'opacity'，1）；
var rect=bar.selectAll（“.rect”）
.data（函数（d）{返回d；}）；
var recenter=rect.enter（）
.append（“rect”）；
rect=recenter.merge（rect）
.attr（'class'，'rect'）；
rect.exit（）
.transition（）
.持续时间（1000）
.style（'opacity'，0）
.remove（）；
rect.transition（）
.持续时间（1000）
.attr（“x”，函数（d）{return x（d.data.retailer）；}）
.attr（“y”，函数（d）{返回y（d[1]）；}）
.attr（'data-etailer'，函数（d）{return d.data.retailer；}）
.attr（“height”，函数（d）{返回y（d[0]）-y（d[1]）；}）
.attr（“宽度”（x.bandwidth（）/1.2））
.style（'opacity'，1）；
});
函数类型（d、i、列）{
对于（i=2，t=0；i