直流图改变图例顺序

Question

我有一个带有图例的堆叠图。我想在不更改图表本身的情况下更改图例的顺序。即当前图例按以下顺序显示

最少
N/A
大多数

我想显示如下

大多数
N/A
最少

 mostLeastLikelyChart
        .width(leastMostLikelyChartWidth)
        .height(chartHeight)
        .margins(margins1) 
        .dimension(mostLeastLikelyDim)
        .gap(10)  
        .ordinalColors(['#f7a35c','#7cb5ec','#08A4BA'])  
        .group(mostLeastLikelyGrp, "Least", function (d) {      
            return d.value.lst.count;
        })
        .stack(mostLeastLikelyGrp, "N/A", function (d) {
            return d.value.na.count;
        })
        .stack(mostLeastLikelyGrp, "Most", function (d) {
            return d.value.most.count;
        })
        .x(d3.scale.ordinal().domain(mostLeastLikelyDim))
        .xUnits(dc.units.ordinal)
        .renderHorizontalGridLines(true)
        .elasticX(true)
              .legend(dc.legend().x(leastMostLikelyChartWidth*0.80).y(0).itemHeight(13).gap(5).legendText(function(d){return d.name}))

Answer 1

哇，这是一个最烦人的默认设置！难怪你想改变这一点。

完全倒过来，因为堆叠的顺序是从下到上：

幸运的是 dc.js 有一个漏洞抽象，所以重写这样的东西真的很容易。有一个函数 chart.legendables() 由图例内部调用，以检索要在图例中绘制的项目。

您可以像这样覆盖它：

      dc.override(chart, 'legendables', function() {
          var items = chart._legendables();
          return items.reverse();
      });

呸！好多了！

我已将此添加到 the stacked bar example。感谢您指出这一点，Farah，也许我们可以为此做一个选项，并以另一种方式默认为堆叠图表。

dc 版本 4+

在 dc@4 及更高版本中，图表使用 ES6 classes 并且 dc.override 消失了。您可以创建一个派生的 class 并使用 super，或者直接覆盖该方法：

    const super_legendables = chart.legendables;
    chart.legendables = function() {
        const items = super_legendables.call(this);
        return items.reverse();
    }

这已记录在案 in the dc@4 upgrade guide。

直流图改变图例顺序

dc charts change legend order

d3.js

dc.js

dc 版本 4+