一、D3基础

1. D3是什么

D3（Data-Driver Documents，数据驱动文档）是基于数据来操作文档的JS库。主要用来做数据可视化的，能帮助用户使用HTML、CSS、SVG、Canvas来展示数据。D3遵循现有的Web标准无需其他任何框架而独立在现代浏览器中，它结合强大的可视化组件来驱动DOM操作。

D3可将数据绑定到DOM上，然后根据数据来计算对应DOM的属性值。D3不是一个框架，因此没有操作上的限制。

2. D3安装

D3是一个开源项目，作者是纽约时报的工程师。D3项目的代码托管于Github中。

使用npm安装
npm install d3

D3可运行在Node和Webworkers中，在Node环境中使用DOM时必须提供自己的DOM实现。推荐使用JSDOM，为避免全局document建议将DOM传递给d3.select或将NodeList传递给d3.selectAll。

var d3 = require('d3');
var jsdom = require('jsdom');

var dom = jsdom.jsdom();
d3.select(dom.body).append(''svg);

在本地开发环境中，由于浏览器的安全策略，不能直接读取本地文件。因此必须运行在一个服务器环境，推荐使用NodeJS的http-server。服务启动后当前目录中将启动一个 http://localhost:8080 的服务。

# 安装HTTP服务器
npm install -g http-server

# 后台运行HTTP Server
http-server &

二、Arrays

数组是一种常用的数据结构，JS支持原声数组操作。

JS数组自身操作

array.pop 移除最后一个元素
array.push 追加一个或多个元素
array.reverse 数组翻转
array.shift 移除首个元素
array.sort 数组排序
array.splice 数组添加移除元素
array.unshift 在数组首位前添加元素

JS数组存取操作

array.concat 数组合并
array.join 数组元素连接
array.slice 提取切片
array.indexOf 查找特定元素的索引
array.lastIndexOf 查找指定元素最后一个索引

JS数组迭代操作

array.filter 数组过滤
array.forEach 对元素执行方法
array.every 是否每个元素都符合给定条件
array.map 根据指定操作对每个元素执行后返回一个新数组
array.some 是否存在符合某个条件的元素
array.reduce 从左到右执行reduce操作并返回一个值
array.reduceRight 从右向左执行reduce操作并返回一个值

D3数组操作

统计类方法(Statics)

最小值 d3.min(array[, accessor])<>

返回给定数组中的最小值，若数组为空则返回undefined。若指定accessor，则相当于在计算最小值之前调用 array.map(accessor)。与内置 Math.min 不同，d3.min忽略 undeifned, null, NaN等值。在忽略缺失数据时有用。此外，元素使用自然排序而非数值排序。

最大值 d3.max(array[, accessor])<>

返回给定数组中的最大值，若数组为空则返回 undefined。若指定accesssor则相当于在计算最小值之前调用 array.map(accessor)。

与内置Math.max不同的是，d3.min忽略undefined、null、NaN，在忽略缺失数据时有用。此外，元素使用自然排序而非数值排序。

最小值和最大值 d3.extent(array[, accessor])<>

根据指定数组返回最小值和最大值，若数组为空则返回 [undefined, undefined]。若指定accessor则相当于计算极值之前调用 array.map(accessor)。

求和 d3.sum(array[, accessor])<>

根据指定的数组计算和值，若数组为空则返回0.若指定了accessor则相当于在求和之前调用array.map(accessor)，此方法会忽略undefined和NaN。

均值 d3.mean(array[, accessor])<>

根据指定的数组返回数组的均值。若数组为空则返回undefined，若指定accessor则相当于在计算之前调用 array.map(accessor) ，此方法会忽略 undefined 和 NaN。

中位数 d3.median(array[, accessor])<>

根据指定数组使用R-7方法返回数组中位数。若数组为空则返回 undefined。若指定 accessor 则相当于在计算之前调用 array.map(accessor)。此方法会忽略 undefined 和 NaN。

分位数 d3.quantile(array, p[, accessor])<>

根据指定的数组返回 p-分位数，p是[0,1]之间的小数。例如中位数相当于 p=0.5，使用 p=0.25 计算第一个四分位数， p=0.75 表示第三个四分位数。

var arr = [0,10,30];
d3.quantile(arr, 0); //0
d3.quantile(arr, 0.5);//10
d3.quantile(arr, 1);//30

d3.quantile(arr, 0.25);//5
d3.quantile(arr, 0.75);//20
d3.quantile(arr, 0.1);//2

方差 d3.variance(array[, accessor])<>

返回指定数组的总体方差的无偏估计(unbiased estimator of the population variance)，若数组中包含的元素小于2则返回undefinded。若指定accessor则相当于在计算之前调用了 array.map(accessor)，此方法忽略了 undefined 和 NaN。

标准差 d3.deviation(array[, accessor])<>

返回数组的标准差，若数组中包含的元素个数小于2则返回 undefined。若指定 accessor 则相当于在计算之前调用了 array.map(accessor) ，此方法忽略了 undefined 和 NaN。

查找类方法(Search)

扫描 d3.scan(array[, comparator])<>

对指定数组进行线性扫描，根据指定的比较操作返回最终元素的索引。若给定的数组不包含可比较的元素（比如比较操作返回NaN）则返回undefined，若无指定比较操作则默认 ascending。

var arr = [{foo:42}, {foo:91}];

d3.scan(arr, function(a,b){
  return a.foo - b.foo;
}); //0

d3.scan(arr, function(a,b){
  return b.foo - a.foo;
});//1

此方法与min类似，scan使用比较操作而非访问器，返回的是索引而非值。

d3.bisectLeft(array, x[, lo[, hi]])

D3.js基础