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比例域你在干什么。

所以这里有一个“假组”的构造函数产生一组手动下令：

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

非假组的做法：

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

下面是我的代码片段：

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如果您需要了解更多信息。