在 dc.js 中订购条形图标签(再次)

我知道关于 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);

但它仍然使用默认排序出来:

http://img.mukewang.com/60c31ddf0001b28d03840204.jpg

我创建了一个包含所有内容的jsFiddle here

如何按照我希望对条形进行排序来对它们进行排序?


梵蒂冈之花
浏览 122回答 1
1回答

繁花不似锦

当elasticX为true或者没有设置x尺度域时,坐标网格mixin会生成X域&nbsp; &nbsp; &nbsp; &nbsp; if (_chart.elasticX() || _x.domain().length === 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _x.domain(_chart._ordinalXDomain());&nbsp; &nbsp; &nbsp; &nbsp; }这完全有道理,但它总是在生成域时对域进行排序:_chart._ordinalXDomain = function () {&nbsp; &nbsp; var groups = _chart._computeOrderedGroups(_chart.data());&nbsp; &nbsp; return groups.map(_chart.keyAccessor());};我想我们可以考虑在ordering为空时不对域进行排序。无论如何,一种解决方法是自己设置域:.x(d3.scaleBand().domain(the_order))您不需要为条形图对组进行排序。(对于折线图,组顺序必须与刻度域一致,但对于条形图则无关紧要。)使用域集,这也有效:.group(groups.age.valueSum)我想这个故事的寓意是自动生成图表很复杂。大多数情况下,确实希望对 X 域进行排序,但是让用户提供自己的排序的最佳方法是什么?我不会说这是最好的方法,但有一种方法可以让它发挥作用。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript