一、简介与下载
D3 （Data-Driven Documents）是一个使用动态图形进行数据可视化的JavaScript程序库。与W3C标准兼容，并且利用广泛实现的SVG、JavaScript和CSS标准，改良自早期的Protovis程序库。与其他的程序库相比，D3对视图结果有很大的可控性。
官方网站 D3.js - Data-Driven Documents 提供了引入该js库的方法和js文件的下载地址
点击网页上的Documentation，Examples会跳转到另一个网站Observable，感觉是一个很好用的网站，但是还没有仔细研究，就先不说了，其中有关D3的例子和教程的链接如下：
Learn D3: Introduction / D3 / Observable
二、以count方法为例说明数据的筛选条件
1.count统计的默认条件
官网中对该函数的描述是returns the number of naturally orderable values present in the given iterable. It is typically used to compute how many valid elements exist in your data. 返回指定可迭代对象中能自然排序的值的个数。
所以直接调用d3.count(object)返回的是数字、日期或可以转换为数字的值的个数，比如下面代码中的“11”，5+1就符合条件，但“6+1”就不符合条件。按照我以往的知识，字符或字符串类型也是能自然排序的，但是从下面的测试发现，统计的相关函数并不会把字符或字符串类型算进去。
let values1 = [1,2,3,4,5,6,7,8,9,10,NaN,undefined,"LALALA","11"]
let values2 = ["a","b","c","d","e",5+1]
let values3 = ["a","b","c","d","e",5+1,"6+1"]
let values4 = [new Date("2022-08-27"),"2022-08-26"]
console.log(d3.count(values1)) //结果是11
console.log(d3.count(values2)) //结果是1
console.log(d3.count(values3)) //结果是1
console.log(d3.count(values4)) //结果是1
console.log(values1.length) //结果是14
console.log(values2.length) //结果是6
console.log(values3.length) //结果是7
console.log(values4.length) //结果是2
该函数会自动去除掉不符合条件的值后再进行统计。实际中，这样并不太方便，因为我们经常是拿到一堆对象，要对其中的某些属性进行统计，所以提供了如下的方式：
2.自定义count统计的条件
用 d3.count / D3 / Observable 中提供的flights数据集进行说明。
let flights = [
{airline: "Icelandair", price: 1621, stops: 3},
{airline: "Multiple airlines", price: undefined, stops: 2},
{airline: "Air France", price: 1948, stops: 0},
{airline: "WestJet", price: undefined, stops: 1},
{airline: "Air France", price: 1951, stops: 1},
{airline: "French Bee", price: 1780, stops: 1}
]
直接调用 console.log(d3.count(flights)) 结果是0，因为flights中的值显然是不能转为数字的。但是调用 console.log(d3.count(flights, d => d.price)) 结果为4。第二个参数叫accessor function，网站上的描述是If you don’t specify an accessor function, d3.count looks at the values directly. 也就是如果不指定该访问器函数，count方法会查看值本身，即按照第一部分中的那样。
d是可迭代对象flights中每次迭代的元素，在flights例子中也就是一行，比如 {airline: "Icelandair", price: 1621, stops: 3}，d => d.price 就是一个箭头函数（箭头函数是es6中新增的，不了解的可以查一查），意思就是将判断的元素改为它内部的price属性，只要该属性符合默认条件即可。
三、其他函数的使用
其他函数的使用和count相同，主要就是注意设定accessor function来对目标数据进行统计操作。这里就不对所有函数一一进行说明了，还是以flights作为数据集用sum举两个例子即可。
求票价的和：
（1）直接调用d3.sum(flights)显然是不行的，结果为0.
需要写成 d3.sum(flights, d => d.price) ，结果为1621+1948+1951+1780=7300
（2）如果要求stops大于1的票价的和，则可以写为
d3.sum(flights.filter(d => d.stops > 1), d => d.price) 结果为1621
filter是js中的函数，并不是d3的函数，相当于先对flights进行了一次过滤，再对剩下的进行求和。