DC.js 折线图上序号的原始排序

Question

我有有序尺度的数据，我想使用 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 中的顺序吗？

Answer 1

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

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

所以这是一个 "fake group" 构造函数，它生成一个手动排序的组：

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)

这是您的 fiddle 的工作叉：https://jsfiddle.net/gordonwoodhull/sjjnx72f/11/

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

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

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

Answer 2

一种非假冒的群体方法：

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

下面是我的代码片段：

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。

DC.js 折线图上序号的原始排序

DC.js original ordering of ordinal scale on lineChart

javascript

d3.js

dc.js