dc是基于d3的一個(gè)提供交叉過濾的原生js圖庫(kù)，主要用于對(duì)高維數(shù)據(jù)進(jìn)行探索。
dc可以畫的圖包括餅圖peiChart、柱狀圖barChart、折線圖lineChart、數(shù)據(jù)表格dataTable、氣泡式圖表bubbleChart、綜合圖表（可以包含餅圖、）compositeChart、系列圖表（多折線圖）seriesChart、地圖geoChoroplethChart、行圖rowChart、散點(diǎn)圖scatterPlot
crossfilter的主要用來對(duì)數(shù)據(jù)進(jìn)行多維分析，用不同的Group By查詢實(shí)現(xiàn)“交叉過濾”
本次主要以scatterplot和barchart為例說明這兩個(gè)js庫(kù)的用法。
主要實(shí)現(xiàn)目標(biāo)如下圖所示：
scatterplot+barchart
相關(guān)代碼如下所示：
// 將rowchart綁定到id 為fruit的DOM元素上
let fruitChart = dc.rowChart("#fruit");
// 將水果種類映射為相應(yīng)的顏色
let fruitColors = d3.scale.ordinal().domain(["Orange", "Apple"]).range(["#f09200", "#4d6f39"]);
//調(diào)用crossfilter，以水果種類作為維度展示數(shù)據(jù)，fruitGroup為相應(yīng)的數(shù)據(jù)
let filter = crossfilter(data);
let fruitDimension = filter.dimension((d) => { return d.Fruit });
let fruitGroup = fruitDimension.group();
fruitChart
//圖基本屬性的設(shè)置
.width(200)
.height(200)
.margins({ top: 10, right: 10, bottom: 30, left: 10 })
//圖數(shù)據(jù)綁定
.dimension(fruitDimension)
.group(fruitGroup)
.colors(fruitColors)
//坐標(biāo)軸設(shè)置
.elasticX(true)
.gap(2)
.xAxis().ticks(4);
