dc.js + crossfilter:ScatterPlot

dc是基于d3的一个提供交叉过滤的原生js图库，主要用于对高维数据进行探索。

dc可以画的图包括饼图peiChart、柱状图barChart、折线图lineChart、数据表格dataTable、气泡式图表bubbleChart、综合图表（可以包含饼图、）compositeChart、系列图表（多折线图）seriesChart、地图geoChoroplethChart、行图rowChart、散点图scatterPlot

crossfilter的主要用来对数据进行多维分析，用不同的Group By查询实现“交叉过滤”

本次主要以scatterplot和barchart为例说明这两个js库的用法。

主要实现目标如下图所示：

scatterplot+barchart

相关代码如下所示：

// 将rowchart绑定到id 为fruit的DOM元素上
 let fruitChart = dc.rowChart("#fruit");
// 将水果种类映射为相应的颜色
 let fruitColors = d3.scale.ordinal().domain(["Orange", "Apple"]).range(["#f09200", "#4d6f39"]);

//调用crossfilter，以水果种类作为维度展示数据，fruitGroup为相应的数据
 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 })
//图数据绑定
      .dimension(fruitDimension)
      .group(fruitGroup)
      .colors(fruitColors)
//坐标轴设置
      .elasticX(true)
      .gap(2)
      .xAxis().ticks(4);

dc.js官方说明网站链接

API查询