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