D3.js的基础部分之数组的处理 数组的排序和求值(v3版本)

Posted 2021-11-04 littlespill

数组的处理 ：

数组时一种常用的数据结构，通常是由相同数据类型的项组成集合，拥有数组名，可以凭借数组名和下标来访问数组项。虽然javascript允许一个数组中存在不同的数据类型，但实际很少这样使用。需要被可视化的数据常以数组的形式存在，虽然JavaScript中提供了不少操作数组的方法，但JavaScript不是为了数据可视化而存在的。因此，D3数据可视化的需求封装了不少数组处理函数。

 

一 排序 ：

排序的方法：

d3.ascending(a,b); //递增函数。如果a小于b，则返回-1；如果a大于b，返回1；如果a等于b，返回0；

 d3.descending(a,b); //递减函数。如果a大于b，则返回-1；如果a小于b，返回1；如果a等于b，返回0；

 

之前给大家说过对选择集使用sort()方法。但是如果不指定比较函数的情况下，默认是d3.ascending。 这是D3提供的一个递增函数。其实D3给我们提供了递增和递减两个比较函数。比较函数的规则是 ：有函数function(a,b),

如果要使a位于b之前，则返回值小于0；

如果要使a位于b之后，则返回值大于0；

如果a与b相等，则返回值为0；

 

d3.ascending(a,b); //递增函数。如果a小于b，则返回-1；如果a大于b，返回1；如果a等于b，返回0；举个例子 ：

 

1 var numList = [22,44,33,11,66];
2 numList.sort(d3.ascending); //注意 ： 此处的sort()方法使JavaScript的数组方法对象(Array)的方法，不是D3的selection.sort()方法。
3 console.log(numList)  //[11,22,33,44,66]

 d3.descending(a,b); //递减函数。如果a大于b，则返回-1；如果a小于b，返回1；如果a等于b，返回0；再举个例子 ：

 

1 var numList = [22,44,33,11,66];
2 numList.sort(d3.descending); //注意 ： 此处的sort()方法使JavaScript的数组方法对象(Array)的方法，不是D3的selection.sort()方法。
3 console.log(numList)  //[66,44,33,22,11]

 

二 求值 ：

 

求值的方法：

d3.min(array[,accessor]) 　　　　　　     //返回数组的最小值

d3.max(array[,accessor]) 　　　　　　    //返回数组的最大值

d3.extent(array[,accessor])　　　　　　  //返回数组最小值和最大值

d3.sum(array[,accessor]) 　　　　　　    //返回数组的总和，如果数据为空，则返回0。

d3.mean(array[,accessor]) 　　　　         //返回数组的平均值，如果数组为空，则返回undefined

d3.median(array[,accessor]) 　　　　      //求数组的中间值，如果数组为空，则返回undefined。

d3.quantile(numbers,p) 　　　　　　      //求取p分位点的值，p的范围为[0,1]。数组需先递增排序。

d3.variance(array[,accessor]) 　　　　    //求方差

d3.deviation(array,[,accessor]) 　  　　    //求标准差

d3.bisectLeft() 　　　　　　　　 　　     //获取某数组项左边的位置

d3.bisect() 　　　　　　　　　　　　    //获取某数组项右边的位置

 

 

 

求取数组的最大值、最小值、中间值、平均值等。在D3中，这一类函数形如 :

d3.function(array,[,accessor]);

其中，第一个参数array是数组，第二个参数是accessor是可选参数。accessor是一个函数，指定之后，数组各项首先会调用accessor，然后再使用原函数function进行处理。

d3.min(array[,accessor]) //返回数组的最小值

d3.max(array[,accessor]) //返回数组的最大值

d3.extent(array[,accessor]) //返回数组最小值和最大值

 

以上三个函数的参数有两个：必选参数array和可选参数accessor。其中，array中的undefined会自动被忽略。举个例子 ：

 

 

 1 //定义数组
 2         var numbers = [30,20,50,10,80,60]
 3 
 4         //求最小值和最大值
 5         var min = d3.min(numbers)
 6         var max = d3.max(numbers)
 7         var extent = d3.extent(numbers)
 8 
 9         //输出结果
10         console.log(min)   //10
11         console.log(max)    //80
12         console.log(extent) //[10,80]
13 
14         //使用accessor，在求值之前先出来了数据
15         var minAcc = d3.min(numbers,function(d){return d*3})
16         var maxAcc = d3.max(numbers,function(d){return d-1})
17         var extentAcc = d3.extent(numbers,function(d){return d%7})
18 
19         //输出结果
20         console.log(minAcc)     //30
21         console.log(maxAcc)     //79
22         console.log(extentAcc)  //[1,6]

 

上面代码中，先是在不指定accessor的情况下，调用了最大值和最小值的三个函数。然后在指定accessor的情况下，再次调用了三个函数。以d3.min为例讲解一下accessor的用法 :对于以上函数，numbers数组中的每一项都会先调用此函数，即每一项都乘以3.调用之后数组变为[90,60,150,30,240,180]，然后再求此数组的最小值，结果为30。d3.extent()相当于分别调用d3.min()和d3.max()，返回值是一个数组，第一项是最小值，第二项是最大值。

 

d3.sum(array[,accessor]) //返回数组的总和，如果数据为空，则返回0。

d3.mean(array[,accessor]) //返回数组的平均值，如果数组为空，则返回undefined

以上连个函数的参数同样是：必选参数array和可选参数accessor。array中无效的值undefined和NaN会被忽略。举个例子 ：

 

 1 //数组定义
 2         var numbers = [30,20,undefined,50,10,80,60,NaN]
 3 
 4         //求总和与平均值
 5         var sum = d3.sum(numbers,function(d){return d-10})
 6         var mean = d3.mean(numbers)
 7 
 8         //输出结果
 9         console.log(sum)    //190
10         console.log(mean)   //41.666666666666664

上面代码中，数组内有undefined和NaN，但是对于函数的使用是不受影响的。

var mean = d3.mean(numbers) //数组中的数据总和除以6，而并非数组的length。而是除以去掉无效数值之后的有效长度。

 

d3.median(array[,accessor]) //求数组的中间值，如果数组为空，则返回undefined。

d3.quantile(numbers,p) //求取p分位点的值，p的范围为[0,1]。数组需先递增排序。

 

d3.median()参数为 ： 数组array和可选参数accessor。与d3.sum()和d3.mean()一样，会忽略掉undefined和NaN。如果数组的有效长度为奇数，则中间值为数据经过递增排序之后位于正中间的值；如果有效长度为偶数，则中间值为经过递增排序后位于正中间的两个数的平均值。d3.median()其实是使用d3.quantile()实现的。d3.quantile()接受两个参数：第一个是经过递增排序后的数组；第二个是分位点，范围是[0,1]。先看一下d3.quantile()是如何使用的 :

 

1 //数组定义
2         var numbers = [2,8,15]
3         numbers.sort(d3.ascending);
4         console.log(d3.quantile(numbers,0))          //返回2
5         console.log(d3.quantile(numbers,0.25))       //返回5
6         console.log(d3.quantile(numbers,0.5))        //返回8
7         console.log(d3.quantile(numbers,0.75))       //返回11.5
8         console.log(d3.quantile(numbers,0.9))        //返回13.599999999999998
9         console.log(d3.quantile(numbers,1.0))        //返回15

 

这段代码的数组中，2位于0分位处，8位于0.5分位处，15位于1分位处。d3.median()其实相当于是将数组中的无效值(undefined和NaN)去掉之后，再使用d3.quantile()获取0.5分位处的值。

接下来看一下使用d3.median()的例子:

1 //定义数组
2         var numbers1 = [3,5,9,undefined,11,NaN];
3         console.log(d3.median(numbers1))    //返回7
4         var numbers2 =[3,5,9,undefined,11,NaN,17];
5         console.log(d3.median(numbers2))    //返回9

 

 

d3.variance(array[,accessor]) //求方差

d3.deviation(array,[,accessor]) //求标准差

 

方差和标准方差用于度量随机变量和均值之间的偏离程度，在概率统计中经常用到。其中标准差是方差的二次方根。这两个值越大，表示此随机变量均值的程度越大。这两个函数的参数为必选参数array和可选参数accessor，并且都会忽略数组array中的undefined和NaN。请看代码 :

 

 1 //定义数组
 2         var numbers1 = [1,9,7,9,5,8,9,10]
 3         console.log(d3.mean(numbers1))          //返回平均值7.25
 4         console.log(d3.variance(numbers1))      //返回方差值 约8.79
 5         console.log(d3.deviation(numbers1))     //返回标准差值 约2.96
 6 
 7         var numbers2 = [7,8,6,7,7,8,8,7];
 8         console.log(d3.mean(numbers2))          //返回平均值7.25
 9         console.log(d3.variance(numbers2))      //返回方差值 约0.5
10         console.log(d3.deviation(numbers2))     //返回标准差值 约0.71

这段代码中，数组numbers1和numbers2的平均值都是7.25，但是前者的方差和标准差分别为8.79和2.96，后者的方差和标准差分别为0.50和0.71，表明数组numbers1中的值偏离平均值7.25的程度较大。

 

d3.bisectLeft() //获取某数组项左边的位置

d3.bisect() //获取某数组项右边的位置

d3.bisectRight() //和d3.bisect() ,获取某数组项右边的位置

 

有时候需要对数组中指定的位置插入项，因此需要获取指定的位置。在JavaScript中，要向某数组插入项，可使用splice(),而bisectLeft()、bisect()和bisectRight()可配合splice()使用。首先来看一下，splice()是怎样插入数组项的:

 1 //定义数组
 2         var dataList = ["China","America","Japan","France"]
 3         //在数组索引为1的位置处，删除0个项后，插入字符串Germany
 4         dataList.splice(1,0,"Germany");
 5         //再来打印一下新数组
 6         console.log(dataList)   //输出 ["China", "Germany", "America", "Japan", "France"]
 7         //在数组索引为3的位置处，删除一个项后，插入两个字符串Britain和Russis
 8         dataList.splice(3,1,"Britain","Russis")
 9         //再来打一下新数组
10         console.log(dataList)   //输出["China", "Germany", "America", "Britain", "Russis", "France"]

 

 

splice()可用于删除数组项，也可以用于插入数组项。

接下来看看d3.bisectLeft()的使用方法 :

 

 1 //定义数组
 2         var numbers = [10,13,16,19,22,25]
 3 
 4         //获取16左边在数组中的位置
 5         var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),16);
 6         console.log(iLeft)  //2
 7 
 8         // 在iLeft位置处，删除0项，出入66
 9         numbers.splice(iLeft,0,66)
10         //打印新数组
11         console.log(numbers)    [10, 13, 66, 16, 19, 22, 25]

 

这段代码中，将numbers排序后，在使用bisectLeft()获取了16左边的位置。bisectLeft()所使用的数组必须经过=递增排序。第二个参数用于指定某项的位置，如果此项在数组中存在，则返回此位置的左边。如果此项在数组中不存在，则返回第一个大于此项的值得左边。举个例子 :

 

 

1 //定义数组
2         var numbers = [10,13,16,19,22,25]
3         //18在数组中不存在，返回介于16和19之间的位置
4         var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),18)
5         console.log(iLeft)  //返回值为3
6        numbers.splice(iLeft,0,77);
7 
8        //打印新数组
9        console.log(numbers) //输出[10, 13, 16, 77, 19, 22, 25]

 

 

bisect()和bisectRight()是一样的，和bisectLeft()类似，只是获取的是指定项右边的位置。

 

 

 22:20:16