再次在dc.js中訂購條形圖標簽

Question

我知道關於SO的特定主題有很多問題，但是所有解決方案似乎都不適合我的情況。

這是我的數據：

var theData = [{
  "value": "190.79",
  "age_days": "22",
  "criteria": "FX"
}, {
  "value": "18.43",
  "age_days": "22",
  "criteria": "FX"
}, {...}]

我將數據放入存儲桶中：

var getAge = (d) => {
  if ((d.age_days) <= 7) {
    return (["1w", "2w", "1m", "3m", "6m", "1y", "All"]);
  } else if ((d.age_days) <= 14) {
    return (["2w", "1m", "3m", "6m", "1y", "All"]);
  } else if ((d.age_days) <= 30) {
    return (["1m", "3m", "6m", "1y", "All"]);
  } else if ((d.age_days) <= 90) {
    return (["3m", "6m", "1y", "All"]);
  } else if ((d.age_days) <= 180) {
    return (["6m", "1y", "All"]);
  } else if ((d.age_days) <= 360) {
    return (["1y", "All"]);
  } else {
    return (["All"]);
  }
};

var ndx = crossfilter(theData);
var dims = {};
var groups = {};

dims.age = ndx.dimension(getAge,true);
groups.age = {};
groups.age.valueSum = dims.age.group().reduceSum((d) => d.value);

然后，我嘗試使用偽造的組方法訂購組：

var sort_group = (source_group, order) => { 
    return {
        all: () => {
            let g = source_group.all();
            let map = {};
            g.forEach(function (kv) {
                map[kv.key] = kv.value;
            });
            return order
                .filter((k) => map.hasOwnProperty(k))
                .map((k) => {
                    return {key: k, value: map[k]}
                });
        }
    };
};
var the_order = ["1w", "2w", "1m", "3m", "6m", "1y", "All"];
var the_sorted_age_group = sort_group(groups.age.valueSum, the_order);

然后我使用創建barChart

theAgeChart
  .height(200)
  .width(400)
  .dimension(dims.age)
  .group(the_sorted_age_group)
  .valueAccessor((d) => d.value)
  .x(d3.scaleBand())
  .xUnits(dc.units.ordinal);

但是它仍然可以使用默認排序：

我在這里創建了一個包含所有內容的jsFiddle 。

我要如何對我的條進行排序？

Answer 1

當elasticX為true或未設置x比例域時，坐標網格mixin將生成X域

        if (_chart.elasticX() || _x.domain().length === 0) {
            _x.domain(_chart._ordinalXDomain());
        }

（資源）

完全有道理，但是在生成域時總是對其進行排序：

_chart._ordinalXDomain = function () {
    var groups = _chart._computeOrderedGroups(_chart.data());
    return groups.map(_chart.keyAccessor());
};

（資源）

我想我們應該考慮在ordering為null時不對域進行ordering 。

無論如何，一種解決方法是自行設置域：

.x(d3.scaleBand().domain(the_order))

您無需對條形圖的組進行排序。 （對於折線圖，組順序必須與比例域一致，但對於條形圖而言並不重要。）

設置域后，它也可以工作：

.group(groups.age.valueSum)

你的小提琴的叉子。

我想這個故事的寓意是自動生成圖表很復雜。 大多數時候，確實希望對X域進行排序，但是允許用戶提供自己的排序的最佳方法是什么？

我不會說這是最好的方法，但是有一種方法可以使它起作用。