DC.js lineChart 上序数比例的原始排序答案

【问题标题】：DC.js original ordering of ordinal scale on lineChartDC.js lineChart 上序数比例的原始排序
【发布时间】：2015-11-05 16:55:13
【问题描述】：

我有一个序数比例的数据，我想在 DC.js 中使用折线图进行可视化。数据看起来像这样：

var data = {points:[{x:"A", y:23}, {x:"C", y:50}, {x:"B", y:40}]}

使用标准 DC.js 可以正常工作：

var chart = dc.lineChart("#chart");
var ndx = crossfilter(data.points);

var ordinal_dimension = ndx.dimension(function (d) {
    return d.x;
})

var loan_dimension = ordinal_dimension.group().reduceSum(function (d) {
    return d.y;
});

chart
    .width(800)
    .height(600)
    d3.scale.ordinal()
    .xUnits(dc.units.ordinal)
    .interpolate('linear')
    .renderArea(true)
    .clipPadding(10)
    .dimension(ordinal_dimension)
    .group(loan_dimension)

chart.render();

但是发生的情况是 x 轴上的顺序发生了变化；而不是“A”、“C”、“B”现在是“A”、“B”、“C”。

为了颠倒顺序，我尝试做这样的事情：

var x_scale = $.map(data.points, function(values) {
  return [values.x];
});

var x = d3.scale.ordinal()
    .domain(x_scale)

但这完全弄乱了图表。请参阅此处的示例：https://jsfiddle.net/ms9j4x00/7/

有什么方法可以保留 DC.js 中的顺序吗？

【问题讨论】：

标签： javascript d3.js dc.js

【解决方案1】：

是的，这很烦人。你会认为你可以为此使用.ordering，但没有骰子，堆叠图表不需要它。

我能想到的最佳解决方法是对group.all() 进行后处理以获得正确的顺序，并且还按照您的方式设置 x 比例域。

所以这是一个“假组”构造函数，它产生一个手动排序的组：

function sort_group(group, order) {
    return {
        all: function() {
            var g = group.all(), map = {};

            g.forEach(function(kv) {
                map[kv.key] = kv.value;
            });
            return order.map(function(k) {
                return {key: k, value: map[k]};
            });
        }
    };
};

像这样使用它：

var sorted_group = sort_group(loan_dimension, order);
chart.group(sorted_group)

这是你小提琴的一个工作分支：https://jsfiddle.net/gordonwoodhull/sjjnx72f/11/

为了链接园艺，这里有一个相关的问题：dc.js sort ordinal line chart by y axis/value

并发出：https://github.com/dc-js/dc.js/issues/598

我认为那里建议的解决方法使用基本相同的方法，尽管他们需要的排序类型不同。

【讨论】：

【解决方案2】：

非假团体方法：

这不是一个干净的，但绝对简单。我们可以尝试在分组之前用数字标记维度。这有助于自动排序，并且在最终图表中，数字可以在勾选格式的帮助下删除。

下面是我的代码sn-p：

var data = {
points: [{
    x: "A",
    y: 23
}, {
    x: "C",
    y: 50
}, {
    x: "B",
    y: 40
}]
}
var i = 1
    //Append a number to the x dimension as 01,02,03 etc
data.points.forEach(function(d) {
    if (i < 10) i = '0' + i;
    d.x_new = i + '_' + d.x;
    i = +i + 1;
    console.log(d.x_new);
});
var chart = dc.lineChart("#chart");
var ndx = crossfilter(data.points);

var ordinal_dimension = ndx.dimension(function(d) {
    return d.x_new;
})

var loan_dimension = ordinal_dimension.group().reduceSum(function(d) {
    return d.y;
});

chart
    .width(800)
    .height(600)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .interpolate('linear')
    .renderArea(true)
    .clipPadding(10)
    .dimension(ordinal_dimension)
    .group(loan_dimension)
    .xAxis().ticks(3).tickFormat(function(d) {
        return d.split("_")[1];
    });

chart.render();

如果您需要更多信息，可以查看此fiddle。

【讨论】：