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； 

之前給大家說過對選擇集使用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ù)組方法對象(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ù)組方法對象(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)

  //輸出結(jié)果
  console.log(min) //10
  console.log(max) //80
  console.log(extent) //[10,80]

  //使用accessor，在求值之前先出來了數(shù)據(jù)
  var minAcc = d3.min(numbers,function(d){return d*3})
  var maxAcc = d3.max(numbers,function(d){return d-1})
  var extentAcc = d3.extent(numbers,function(d){return d%7})

  //輸出結(jié)果
  console.log(minAcc)  //30
  console.log(maxAcc)  //79
  console.log(extentAcc) //[1,6]

上面代碼中，先是在不指定accessor的情況下，調(diào)用了最大值和最小值的三個(gè)函數(shù)。然后在指定accessor的情況下，再次調(diào)用了三個(gè)函數(shù)。以d3.min為例講解一下accessor的用法 :對于以上函數(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)
  //輸出結(jié)果
  console.log(sum) //190
  console.log(mean) //41.666666666666664

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

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ù)組的有效長度為奇數(shù)，則中間值為數(shù)據(jù)經(jī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。請看代碼 :

//定義數(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í)候需要對數(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)  //輸出 ["China", "Germany", "America", "Japan", "France"]
    //在數(shù)組索引為3的位置處，刪除一個(gè)項(xiàng)后，插入兩個(gè)字符串Britain和Russis
    dataList.splice(3,1,"Britain","Russis")
    //再來打一下新數(shù)組
    console.log(dataList)  //輸出["China", "Germany", "America", "Britain", "Russis", "France"]

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) //輸出[10, 13, 16, 77, 19, 22, 25]

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

總結(jié)

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