概述
用了一个周的DC，发现网上相关文章很少，所以自己写下笔记了，能力有限，勿喷。
DC是一个把D3、crossfilter整合起来的框架，自然它具有上述两者的功能，但是DC本身并没有绘制视图的能力，它依赖于D3、crossfilter。
D3是利用HTML5的SVG绘制矢量图的框架，相比Echarts，个人感觉更灵活，链式函数写起来非常优雅，但是门槛更高。
crossfilter是用来组织数据的框架，主要有dimension维度、group组这两个概念，可以把像CSV这样的数据很好的分维度（方便我们过滤数据 ）、分组（类似SQL里的group by）。
crossfilter的文档：
https://github.com/square/crossfilter/wiki/API-Reference#dimension_groupAll
D3的文档：
https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
DC的文档：
http://dc-js.github.io/dc.js/
遇到过的问题
Q1:payments是什么？
var payments=crossfilter([
{date:"2011-11-14T16:17:54Z", quantity:2, total:190, tip:100, type:"tab"},
{date:"2011-11-14T16:20:19Z", quantity:2, total:190, tip:100, type:"tab"},
{date:"2011-11-14T16:28:54Z", quantity:1, total:300, tip:200, type:"visa"},
{date:"2011-11-14T16:30:43Z", quantity:2, total:90, tip:0, type:"tab"},
{date:"2011-11-14T16:48:46Z", quantity:2, total:90, tip:0, type:"tab"},
{date:"2011-11-14T16:53:41Z", quantity:2, total:90, tip:0, type:"tab"},
{date:"2011-11-14T16:54:06Z", quantity:1, total:100, tip:0, type:"cash"},
{date:"2011-11-14T16:58:03Z", quantity:2, total:90, tip:0, type:"tab"},
{date:"2011-11-14T17:07:21Z", quantity:2, total:90, tip:0, type:"tab"},
{date:"2011-11-14T17:22:59Z", quantity:2, total:90, tip:0, type:"tab"},
{date:"2011-11-14T17:25:45Z", quantity:2, total:200, tip:0, type:"cash"},
{date:"2011-11-14T17:29:52Z", quantity:1, total:200, tip:100, type:"visa"}
]);
payments是一个crossfilter的对象，这个对象的所有属性都是方法
add()：向这个payments再添加一条数据
dimension()：分维度，主要作用是让我们更方便的过滤数据，是后续group操作的基础，如果像如下这样写，就是说按照total来分维度
var paymentsByTotal=payments.dimension(function(d){
return d.total;
})
//分好维度以后，就方便过滤数据了
var filteredPaymentsByTotal = paymentsByTotal.filter([100,200]);//过滤出total在[100,200]之间的数据
paymentsByTotal.filter(120);//过滤total == 120的数据
paymentsByTotal.filter(function(d) {returnd%2; }); // 过滤total能被2整除的数据
paymentsByTotal.filter(null);//不过滤
/**
*一定注意，这里得出的filteredPaymentsByTotal对象自身也不储存任何数据，你只能通过它的方法来获取数据。
比如filteredPaymentsByTotal.top(10) ，得到total最高的前10个对象的数组。
*/
Q2:group是什么的？
group其实和SQL里面的group by一样，就是把你 所选的那个维度的数据 整合起来，整合方式有count、sum、自定义，需要用到reduce方法。如果想让数据排序，还可以用order方法。
这次我们按照type来分维度,然后分组:
SQL：select sum(total) from payments group by type order by total
crossfilter：
var paymentGroupsByType = payments.dimension(function(d){
return d.type;
}).group().reduceSum(function(d){
return d.total;
}).order(function(d){
})
//如果想自定义整合方式，使用reduce方法，可以返回一个自定义的对象
var paymentGroupsByType = payments.dimension(function(d){
return d.type;
}).group().reduce(function(d){
//p代表你定制的那个对象，因为是按照type分维度的，所以当第一个维度：tab，会使这个函数运行type='tab'数据的个数的次数，当运行玩这些次数以后，这个p就会重置，编程p.count=0 p.all = 0;
function(p,v){
p.count += 1;
p.all += v.total;
},
function(p,v){
p.count -= 1;
p.all -= v.total;
},
//这里定制自己的对象
function(p,v){
return {
count:0,
all:0
}
}
})
Q3:groupAll()是什么
groupAll()是一个便捷方法，它把所有记录都归为一个组，这个方法得到的对象没有top这样获取数据的方法，取而代之的是有一个values属性，可以方便的得到payments里有多少条数据。
（貌似也没啥用...）
待续。。。
网友评论