D3.js的基礎部分之數組的處理數組的排序和求值(v3版本)

數組的處理 ：

數組時一種常用的數據結構，通常是由相同數據類型的項組成集合，擁有數組名，可以憑借數組名和下標來訪問數組項。雖然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；舉個例子 ：

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

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

var numList = [22,44,33,11,66];
 numList.sort(d3.descending); //注意 ： 此處的sort()方法使JavaScript的數組方法對象(Array)的方法，不是D3的selection.sort()方法。
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會自動被忽略。舉個例子： 

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

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

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

  //使用accessor，在求值之前先出來了數據
  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})

  //輸出結果
  console.log(minAcc)  //30
  console.log(maxAcc)  //79
  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會被忽略。舉個例子 ： 

//數組定義
  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)
  //輸出結果
  console.log(sum) //190
  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()是如何使用的 :

//數組定義
  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

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

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

 //定義數組
     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])
 //求標準差

方差和標準方差用于度量隨機變量和均值之間的偏離程度，在概率統計中經常用到。其中標準差是方差的二次方根。這兩個值越大，表示此隨機變量均值的程度越大。這兩個函數的參數為必選參數array和可選參數accessor，并且都會忽略數組array中的undefined和NaN。請看代碼 :

//定義數組
    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))   //返回標準差值 約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))   //返回標準差值 約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()是怎樣插入數組項的:

//定義數組
    var dataList = ["China","America","Japan","France"]
    //在數組索引為1的位置處，刪除0個項后，插入字符串Germany
    dataList.splice(1,0,"Germany");
    //再來打印一下新數組
    console.log(dataList)  //輸出 ["China", "Germany", "America", "Japan", "France"]
    //在數組索引為3的位置處，刪除一個項后，插入兩個字符串Britain和Russis
    dataList.splice(3,1,"Britain","Russis")
    //再來打一下新數組
    console.log(dataList)  //輸出["China", "Germany", "America", "Britain", "Russis", "France"]

splice()可用于刪除數組項，也可以用于插入數組項。

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

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

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

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

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

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

    //打印新數組
    console.log(numbers) //輸出[10, 13, 16, 77, 19, 22, 25]

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

總結

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