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 scale域。

所以这里是一个“假组”构造函数，它生成一个手动订购的组：

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

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

Answer 2

非假群体方法：

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

以下是我的代码段：

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在lineChart上的序数比例的原始排序

2 个答案: