假设我有100年的月度数据,总共1200个数据点,见底部。
要绘制一个微小的概览折线图(例如只有100个数据点),我必须通过分组手动完成。例如,按年度对数据进行分组,然后得到12个月的平均值,遍历每个组,最后将数据点减少到100。
使用crossfilter或任何其他库有一种方便的方法,而不是这种方法吗?
[
{ date: 1900-01, value: 72000000000},
{ date: 1900-02, value: 58000000000},
{ date: 1900-03, value: 2900000000},
{ date: 1900-04, value: 31000000000},
{ date: 1900-05, value: 33000000000},
...
{ date: 1999-11, value: 30000000000},
{ date: 1999-12, value: 10000000000},
]
无论您使用哪个库,它都将是相同的算法,只是指定它的不同方式。在这种情况下,d3.nest可能是最简单的方法,但如果你想快速过滤,那么crossfilter方式也不算太差。
使用d3.nest和crossfilter之间的区别在于我们不是构造一个值数组,只是一个值。因此,我们将保持总和和计数。
我们还需要指定从bin中删除行时会发生什么。
var parse = d3.timeParse("%Y-%m");
data.forEach(function(d) {
// it's best to convert fields before passing to crossfilter
// because crossfilter will look at them many times
d.date = parse(d.key);
});
var cf = crossfilter(data);
var yearDim = cf.dimension(d => d3.timeYear(d.date));
var yearAvgGroup = yearDim.group().reduce(
function(p, v) { // add
p.sum += v.value;
++p.count;
p.avg = p.sum/p.count;
return p;
},
function(p, v) { // remove
p.sum -= v.value;
--p.count;
p.avg = p.count ? p.sum/p.count : 0;
return p;
},
function() { // init
return {sum: 0, count: 0, avg: 0};
}
);
现在yearAvgGroup.all()
将返回一组键/值对,其中键是年份,值包含sum
,count
和avg
。
Crossfilter不会使这个问题特别方便解决,但reductio有一个辅助功能:
var yearAvgGroup = yearDim.group();
reductio().avg(d => d.value);
注意:除非您拥有大量数据,否则无关紧要,但仅计算组中的总和和计数更有效,并在需要时计算平均值。
如果您使用dc.js,可以使用valueAccessor
:
// remove avg lines from the above, and
chart.dimension(yearDim)
.group(yearAvgGroup)
.valueAccessor(kv => kv.value.sum / kv.value.count);
假设您的问题仅涉及生成数据,您可以使用d3-nest(不使用crossfilter)来平均每年:
解析日期值后,您可以将日期格式化为一年以创建密钥。这会按键对值进行分组,然后我们使用函数汇总这些值以计算给定年份的平均值:
var parse = d3.timeParse("%Y-%m"); // takes: "1900-01"
var format = d3.timeFormat("%Y"); // gives: "1900"
var means = d3.nest()
.key(function(d) { return format(parse(d.date)); })
.rollup(function(values) { return d3.mean(values, function(d) {return d.value; }) })
.entries(data);
这给了我们以下结构:
[
{
"key": "1900",
"value": 39380000000
},
{
"key": "1999",
"value": 20000000000
}
]
var data = [
{ date: "1900-01", value: 72000000000},
{ date: "1900-02", value: 58000000000},
{ date: "1900-03", value: 2900000000},
{ date: "1900-04", value: 31000000000},
{ date: "1900-05", value: 33000000000},
{ date: "1999-11", value: 30000000000},
{ date: "1999-12", value: 10000000000},
];
var parse = d3.timeParse("%Y-%m");
var format = d3.timeFormat("%Y");
var means = d3.nest()
.key(function(d) { return format(parse(d.date)); })
.rollup(function(values) { return d3.mean(values, function(d) {return d.value; }) })
.entries(data);
console.log(means);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>