D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)

數(shù)組的處理 ：

數(shù)組時(shí)一種常用的數(shù)據(jù)結(jié)構(gòu)，通常是由相同數(shù)據(jù)類型的項(xiàng)組成集合，擁有數(shù)組名，可以憑借數(shù)組名和下標(biāo)來訪問數(shù)組項(xiàng)。雖然JavaScript允許一個(gè)數(shù)組中存在不同的數(shù)據(jù)類型，但實(shí)際很少這樣使用。需要被可視化的數(shù)據(jù)常以數(shù)組的形式存在，雖然JavaScript中提供了不少操作數(shù)組的方法，但JavaScript不是為了數(shù)據(jù)可視化而存在的。因此，D3數(shù)據(jù)可視化的需求封裝了不少數(shù)組處理函數(shù)。

一 排序 ：

排序的方法：

d3.ascending(a,b);
//遞增函數(shù)。如果a小于b，則返回-1；如果a大于b，返回1；如果a等于b，返回0；

d3.descending(a,b);
 //遞減函數(shù)。如果a大于b，則返回-1；如果a小于b，返回1；如果a等于b，返回0； 

之前給大家說過對(duì)選擇集使用sort()方法。但是如果不指定比較函數(shù)的情況下，默認(rèn)是d3.ascending。 這是D3提供的一個(gè)遞增函數(shù)。其實(shí)D3給我們提供了遞增和遞減兩個(gè)比較函數(shù)。比較函數(shù)的規(guī)則是 ：有函數(shù)function(a,b),

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

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

如果a與b相等，則返回值為0； 

d3.ascending(a,b);

//遞增函數(shù)。如果a小于b，則返回-1；如果a大于b，返回1；如果a等于b，返回0；舉個(gè)例子 ：

 var numList = [22,44,33,11,66];
 numList.sort(d3.ascending); //注意 ： 此處的sort()方法使JavaScript的數(shù)組方法對(duì)象(Array)的方法，不是D3的selection.sort()方法。
console.log(numList) //[11,22,33,44,66]

 d3.descending(a,b);
//遞減函數(shù)。如果a大于b，則返回-1；如果a小于b，返回1；如果a等于b，返回0；再舉個(gè)例子 ：

var numList = [22,44,33,11,66];
 numList.sort(d3.descending); //注意 ： 此處的sort()方法使JavaScript的數(shù)組方法對(duì)象(Array)的方法，不是D3的selection.sort()方法。
console.log(numList) //[66,44,33,22,11]

二 求值 ：

求值的方法：

d3.min(array[,accessor]) 　　　　　　    
//返回?cái)?shù)組的最小值
d3.max(array[,accessor]) 　　　　　　   
//返回?cái)?shù)組的最大值
d3.extent(array[,accessor])　　　　　　 
//返回?cái)?shù)組最小值和最大值

d3.sum(array[,accessor]) 　　　　　　   
//返回?cái)?shù)組的總和，如果數(shù)據(jù)為空，則返回0。
d3.mean(array[,accessor]) 　　　　        
//返回?cái)?shù)組的平均值，如果數(shù)組為空，則返回undefined

d3.median(array[,accessor]) 　　　　     
//求數(shù)組的中間值，如果數(shù)組為空，則返回undefined。
d3.quantile(numbers,p) 　　　　　　     
//求取p分位點(diǎn)的值，p的范圍為[0,1]。數(shù)組需先遞增排序。 

d3.variance(array[,accessor]) 　　　　   
//求方差
 d3.deviation(array,[,accessor]) 　  　　   
//求標(biāo)準(zhǔn)差 

d3.bisectLeft() 　　　　　　　　 　　    
//獲取某數(shù)組項(xiàng)左邊的位置
 d3.bisect() 　　　　　　　　　　　　  
 //獲取某數(shù)組項(xiàng)右邊的位置

求取數(shù)組的最大值、最小值、中間值、平均值等。在D3中，這一類函數(shù)形如 :
d3.function(array,[,accessor]);
其中，第一個(gè)參數(shù)array是數(shù)組，第二個(gè)參數(shù)是accessor是可選參數(shù)。accessor是一個(gè)函數(shù)，指定之后，數(shù)組各項(xiàng)首先會(huì)調(diào)用accessor，然后再使用原函數(shù)function進(jìn)行處理。

d3.min(array[,accessor])
//返回?cái)?shù)組的最小值
 d3.max(array[,accessor])
//返回?cái)?shù)組的最大值
 d3.extent(array[,accessor])
 //返回?cái)?shù)組最小值和最大值

以上三個(gè)函數(shù)的參數(shù)有兩個(gè)：必選參數(shù)array和可選參數(shù)accessor。其中，array中的undefined會(huì)自動(dòng)被忽略。舉個(gè)例子： 

//定義數(shù)組
 var numbers = [30,20,50,10,80,60]

 //求最小值和最大值
 var min = d3.min(numbers)
 var max = d3.max(numbers)
 var extent = d3.extent(numbers)

 //

上面代碼中，先是在不指定accessor的情況下，調(diào)用了最大值和最小值的三個(gè)函數(shù)。然后在指定accessor的情況下，再次調(diào)用了三個(gè)函數(shù)。以d3.min為例講解一下accessor的用法 :對(duì)于以上函數(shù)，numbers數(shù)組中的每一項(xiàng)都會(huì)先調(diào)用此函數(shù)，即每一項(xiàng)都乘以3.調(diào)用之后數(shù)組變?yōu)閇90,60,150,30,240,180]，然后再求此數(shù)組的最小值，結(jié)果為30。d3.extent()相當(dāng)于分別調(diào)用d3.min()和d3.max()，返回值是一個(gè)數(shù)組，第一項(xiàng)是最小值，第二項(xiàng)是最大值。

d3.sum(array[,accessor])
//返回?cái)?shù)組的總和，如果數(shù)據(jù)為空，則返回0。
d3.mean(array[,accessor])
 //返回?cái)?shù)組的平均值，如果數(shù)組為空，則返回undefined 

以上連個(gè)函數(shù)的參數(shù)同樣是：必選參數(shù)array和可選參數(shù)accessor。array中無效的值undefined和NaN會(huì)被忽略。舉個(gè)例子 ： 

//數(shù)組定義
 var numbers = [30,20,undefined,50,10,80,60,NaN]
 //求總和與平均值
 var sum = d3.sum(numbers,function(d){return d-10})
 var mean = d3.mean(numbers)
 //

上面代碼中，數(shù)組內(nèi)有undefined和NaN，但是對(duì)于函數(shù)的使用是不受影響的。
var mean = d3.mean(numbers) //數(shù)組中的數(shù)據(jù)總和除以6，而并非數(shù)組的length。而是除以去掉無效數(shù)值之后的有效長(zhǎng)度。

d3.median(array[,accessor])
//求數(shù)組的中間值，如果數(shù)組為空，則返回undefined。
 d3.quantile(numbers,p)
//求取p分位點(diǎn)的值，p的范圍為[0,1]。數(shù)組需先遞增排序。 

d3.median()參數(shù)為 ： 數(shù)組array和可選參數(shù)accessor。與d3.sum()和d3.mean()一樣，會(huì)忽略掉undefined和NaN。如果數(shù)組的有效長(zhǎng)度為奇數(shù)，則中間值為數(shù)據(jù)經(jīng)過遞增排序之后位于正中間的值；如果有效長(zhǎng)度為偶數(shù)，則中間值為經(jīng)過遞增排序后位于正中間的兩個(gè)數(shù)的平均值。d3.median()其實(shí)是使用d3.quantile()實(shí)現(xiàn)的。d3.quantile()接受兩個(gè)參數(shù)：第一個(gè)是經(jīng)過遞增排序后的數(shù)組；第二個(gè)是分位點(diǎn)，范圍是[0,1]。先看一下d3.quantile()是如何使用的 :

//數(shù)組定義
 var numbers = [2,8,15]
 numbers.sort(d3.ascending);
 console.log(d3.quantile(numbers,0)) //返回2
 console.log(d3.quantile(numbers,0.25)) //返回5
 console.log(d3.quantile(numbers,0.5)) //返回8
 console.log(d3.quantile(numbers,0.75)) //返回11.5
 console.log(d3.quantile(numbers,0.9)) //返回13.599999999999998
 console.log(d3.quantile(numbers,1.0)) //返回15

這段代碼的數(shù)組中，2位于0分位處，8位于0.5分位處，15位于1分位處。d3.median()其實(shí)相當(dāng)于是將數(shù)組中的無效值(undefined和NaN)去掉之后，再使用d3.quantile()獲取0.5分位處的值。

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

 //定義數(shù)組
 var numbers1 = [3,5,9,undefined,11,NaN];
 console.log(d3.median(numbers1)) //返回7
 var numbers2 =[3,5,9,undefined,11,NaN,17];
 console.log(d3.median(numbers2)) //返回9

d3.variance(array[,accessor])
 //求方差
d3.deviation(array,[,accessor])
 //求標(biāo)準(zhǔn)差

方差和標(biāo)準(zhǔn)方差用于度量隨機(jī)變量和均值之間的偏離程度，在概率統(tǒng)計(jì)中經(jīng)常用到。其中標(biāo)準(zhǔn)差是方差的二次方根。這兩個(gè)值越大，表示此隨機(jī)變量均值的程度越大。這兩個(gè)函數(shù)的參數(shù)為必選參數(shù)array和可選參數(shù)accessor，并且都會(huì)忽略數(shù)組array中的undefined和NaN。請(qǐng)看代碼 :

//定義數(shù)組
 var numbers1 = [1,9,7,9,5,8,9,10]
 console.log(d3.mean(numbers1)) //返回平均值7.25
 console.log(d3.variance(numbers1)) //返回方差值 約8.79
 console.log(d3.deviation(numbers1)) //返回標(biāo)準(zhǔn)差值 約2.96

 var numbers2 = [7,8,6,7,7,8,8,7];
 console.log(d3.mean(numbers2)) //返回平均值7.25
 console.log(d3.variance(numbers2)) //返回方差值 約0.5
 console.log(d3.deviation(numbers2)) //返回標(biāo)準(zhǔn)差值 約0.71

這段代碼中，數(shù)組numbers1和numbers2的平均值都是7.25，但是前者的方差和標(biāo)準(zhǔn)差分別為8.79和2.96，后者的方差和標(biāo)準(zhǔn)差分別為0.50和0.71，表明數(shù)組numbers1中的值偏離平均值7.25的程度較大。

d3.bisectLeft()
 //獲取某數(shù)組項(xiàng)左邊的位置
d3.bisect()
//獲取某數(shù)組項(xiàng)右邊的位置
d3.bisectRight()
//和d3.bisect() ,獲取某數(shù)組項(xiàng)右邊的位置

有時(shí)候需要對(duì)數(shù)組中指定的位置插入項(xiàng)，因此需要獲取指定的位置。在JavaScript中，要向某數(shù)組插入項(xiàng)，可使用splice(),而bisectLeft()、bisect()和bisectRight()可配合splice()使用。首先來看一下，splice()是怎樣插入數(shù)組項(xiàng)的:

//定義數(shù)組
 var dataList = ["China","America","Japan","France"]
 //在數(shù)組索引為1的位置處，刪除0個(gè)項(xiàng)后，插入字符串Germany
 dataList.splice(1,0,"Germany");
 //再來打印一下新數(shù)組
 console.log(dataList) //

splice()可用于刪除數(shù)組項(xiàng)，也可以用于插入數(shù)組項(xiàng)。

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

//定義數(shù)組
 var numbers = [10,13,16,19,22,25]

 //獲取16左邊在數(shù)組中的位置
 var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),16);
 console.log(iLeft) //2

 // 在iLeft位置處，刪除0項(xiàng)，出入66
 numbers.splice(iLeft,0,66)
 //打印新數(shù)組
 console.log(numbers) [10, 13, 66, 16, 19, 22, 25]

這段代碼中，將numbers排序后，在使用bisectLeft()獲取了16左邊的位置。bisectLeft()所使用的數(shù)組必須經(jīng)過=遞增排序。第二個(gè)參數(shù)用于指定某項(xiàng)的位置，如果此項(xiàng)在數(shù)組中存在，則返回此位置的左邊。如果此項(xiàng)在數(shù)組中不存在，則返回第一個(gè)大于此項(xiàng)的值得左邊。舉個(gè)例子 :

//定義數(shù)組
 var numbers = [10,13,16,19,22,25]
 //18在數(shù)組中不存在，返回介于16和19之間的位置
 var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),18)
 console.log(iLeft) //返回值為3
 numbers.splice(iLeft,0,77);

 //打印新數(shù)組
 console.log(numbers) //

bisect()和bisectRight()是一樣的，和bisectLeft()類似，只是獲取的是指定項(xiàng)右邊的位置。

總結(jié)

以上所述是小編給大家介紹的D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com