概述
用了一個(gè)周的DC，發(fā)現(xiàn)網(wǎng)上相關(guān)文章很少，所以自己寫(xiě)下筆記了，能力有限，勿噴。
DC是一個(gè)把D3、crossfilter整合起來(lái)的框架，自然它具有上述兩者的功能，但是DC本身并沒(méi)有繪制視圖的能力，它依賴(lài)于D3、crossfilter。
D3是利用HTML5的SVG繪制矢量圖的框架，相比Echarts，個(gè)人感覺(jué)更靈活，鏈?zhǔn)胶瘮?shù)寫(xiě)起來(lái)非常優(yōu)雅，但是門(mén)檻更高。
crossfilter是用來(lái)組織數(shù)據(jù)的框架，主要有dimension維度、group組這兩個(gè)概念，可以把像CSV這樣的數(shù)據(jù)很好的分維度（方便我們過(guò)濾數(shù)據(jù) ）、分組（類(lèi)似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/
遇到過(guò)的問(wèn)題
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是一個(gè)crossfilter的對(duì)象，這個(gè)對(duì)象的所有屬性都是方法
add()：向這個(gè)payments再添加一條數(shù)據(jù)
dimension()：分維度，主要作用是讓我們更方便的過(guò)濾數(shù)據(jù)，是后續(xù)group操作的基礎(chǔ)，如果像如下這樣寫(xiě)，就是說(shuō)按照total來(lái)分維度
var paymentsByTotal=payments.dimension(function(d){
? ? return d.total;
})
//分好維度以后，就方便過(guò)濾數(shù)據(jù)了
var filteredPaymentsByTotal = ?paymentsByTotal.filter([100,200]);//過(guò)濾出total在[100,200]之間的數(shù)據(jù)
paymentsByTotal.filter(120);//過(guò)濾total == 120的數(shù)據(jù)
paymentsByTotal.filter(function(d) {returnd%2; }); // 過(guò)濾total能被2整除的數(shù)據(jù)
paymentsByTotal.filter(null);//不過(guò)濾
/**
*一定注意，這里得出的filteredPaymentsByTotal對(duì)象自身也不儲(chǔ)存任何數(shù)據(jù)，你只能通過(guò)它的方法來(lái)獲取數(shù)據(jù)。
比如filteredPaymentsByTotal.top(10) ，得到total最高的前10個(gè)對(duì)象的數(shù)組。
*/
Q2:group是什么的？
group其實(shí)和SQL里面的group by一樣，就是把你 所選的那個(gè)維度的數(shù)據(jù) 整合起來(lái)，整合方式有count、sum、自定義，需要用到reduce方法。如果想讓數(shù)據(jù)排序，還可以用order方法。
這次我們按照type來(lái)分維度,然后分組:
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方法，可以返回一個(gè)自定義的對(duì)象
var paymentGroupsByType = payments.dimension(function(d){
? ? return d.type;
}).group().reduce(function(d){
//p代表你定制的那個(gè)對(duì)象，因?yàn)槭前凑誸ype分維度的，所以當(dāng)?shù)谝粋€(gè)維度：tab，會(huì)使這個(gè)函數(shù)運(yùn)行type='tab'數(shù)據(jù)的個(gè)數(shù)的次數(shù)，當(dāng)運(yùn)行玩這些次數(shù)以后，這個(gè)p就會(huì)重置，編程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;
? ?},
? //這里定制自己的對(duì)象
? ?function(p,v){
? ? return {
? ? ? ? count:0,
? ? ? ? all:0
? ? ?}
? }
})
Q3:groupAll()是什么
groupAll()是一個(gè)便捷方法，它把所有記錄都?xì)w為一個(gè)組，這個(gè)方法得到的對(duì)象沒(méi)有top這樣獲取數(shù)據(jù)的方法，取而代之的是有一個(gè)values屬性，可以方便的得到payments里有多少條數(shù)據(jù)。
（貌似也沒(méi)啥用...）
待續(xù)。。。
