DC.js在lineChart上的有序小数的原始排序

DC.js original ordering of ordinal scale on lineChart

本文关键字：小数 原始 排序 DC lineChart js      更新时间：2023-09-26

我有一个有序的数据，我想用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"、"B"、"C"，而不是"A"，"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中的排序吗？

是的，这很烦人。你可能会认为你可以使用.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根据y轴/值对有序折线图进行排序

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

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

一种非伪组方法：

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

下面是我的代码片段：

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();

如果你需要更多信息，你可以检查一下这个小提琴。

相关文章：