dc.js按y轴/值排序顺序线图 [英] dc.js sort ordinal line chart by y axis/value
问题描述
我有一个dc.js序数图表,其x轴由化妆品组成,y轴是销售数量。我想按照销售额下降对图表进行排序,但是当我使用 .ordering(function(d){return -d.value.ty})
折线图的路径
I have a dc.js ordinal chart whose x-axis consists of things like 'Cosmetics' and the y-axis is the number of sales. I want to sort the chart by sales decreasing, however when I use .ordering(function(d){return -d.value.ty})
the path of the line chart is still ordered by the x-axis.
var departmentChart = dc.compositeChart('#mystore_department_chart'),
ndx = crossfilter(response.data),
dimension = ndx.dimension(function(d) {return d.name}),
group = dimension.group().reduce(function(p, v) {
p.ty += v.tyvalue;
p.ly += v.lyvalue;
return p;
}, function(p, v) {
p.ty -= v.tyvalue;
p.ly -= v.lyvalue;
return p;
}, function() {
return {
ty: 0,
ly: 0
}
});
departmentChart
.ordering(function(d){return -d.value.ty})
//dimensions
//.width(768)
.height(250)
.margins({top: 10, right: 50, bottom: 25, left: 50})
//x-axis
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.xAxisLabel('Department')
//left y-axis
.yAxisLabel('Sales')
.elasticY(true)
.renderHorizontalGridLines(true)
//composition
.dimension(dimension)
.group(group)
.compose([
dc.barChart(departmentChart)
.centerBar(true)
.gap(5)
.dimension(dimension)
.group(group, 'This Year')
.valueAccessor(function(d) {return d.value.ty}),
dc.lineChart(departmentChart)
.renderArea(false)
.renderDataPoints(true)
.dimension(dimension)
.group(group, 'Last Year')
.valueAccessor(function(d) {return d.value.ly})
])
.brushOn(false)
render();
推荐答案
这是我最后做的。请注意,它可能在大数据集上存在性能问题,因为all()比top(Infinity)快。由于某种原因,我无法获得
This is the hack I ended up doing. Be aware that it could have performance issues on large data sets as all() is faster than top(Infinity). For some reason I couldn't get Gordon's answer to work, but in theory it should.
在我的群组中,我指定了一个订单函数
On my group I specified an order function
group.order(function(p) {
return p.myfield;
});
然后因为all()没有使用顺序函数我覆盖默认的所有函数
Then because all() doesn't use the order function I overrode the default all function
group.all = function() {
return group.top(Infinity);
}
然后在我的图表上我必须指定一个顺序函数
And then on my chart I had to specify an order function
chart.ordering(function(d){
return -d.value.myfield
}); // order by myfield descending
这篇关于dc.js按y轴/值排序顺序线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!