d3.js nest.sortKeys()用法及代碼示例

D3.js是使用JavaScript構建的庫，尤其用於數據可視化。 nest.sortKeys()函數用於按特定順序(即升序或降序)對鍵進行排序。

用法:

nest.sortkeys( comparatorFunction )

參數：該函數接受單個參數比較器函數，該函數用於指定如何對鍵進行排序。如果沒有為當前鍵指定比較器函數，則未定義返回鍵的順序。

返回值：它根據比較器函數返回排序的鍵(升/降)。

以下示例程序旨在說明D3.js中的nest.sortKeys()函數。

範例1：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <title> 
        D3.js nest.sortKeys() Function 
    </title> 
</head> 
  
<body> 
    <script> 
          
        // Dataset 
        var cars = [ 
            { name:"car1", manufactured:"1950", model:"s51" }, 
            { name:"car1", manufactured:"1952", model:"s51" }, 
            { name:"car1", manufactured:"1951", model:"s50" }, 
            { name:"car1", manufactured:"1953", model:"s52" }, 
            { name:"car1", manufactured:"1953", model:"s50" }, 
            { name:"car1", manufactured:"1950", model:"s52" }, 
        ]; 
  
        var groupedData = d3.nest() 
            .key(function (d) { return d.manufactured; }) 
  
            // sorting keys in ascending order 
            .sortKeys(d3.ascending) 
            .entries(cars); 
        console.log("ArrayData:", groupedData); 
    </script> 
</body> 
  
</html>

輸出：

鍵按升序排列

範例2：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <title> 
        D3.js nest.sortKeys() Function 
    </title> 
</head> 
  
<body> 
    <script> 
        var cars = [ 
            { name:"car1", manufactured:"1950", model:"s51" }, 
            { name:"car1", manufactured:"1952", model:"s51" }, 
            { name:"car1", manufactured:"1951", model:"s50" }, 
            { name:"car1", manufactured:"1953", model:"s52" }, 
            { name:"car1", manufactured:"1953", model:"s50" }, 
            { name:"car1", manufactured:"1950", model:"s52" }, 
        ]; 
        var groupedData = d3.nest() 
            .key(function (d) { return d.manufactured; }) 
  
            // Sorting keys in descending order 
            .sortKeys(d3.descending) 
            .entries(cars); 
        console.log("ArrayData:", groupedData); 
    </script> 
</body> 
  
</html>

輸出：

鍵按降序排列

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js nest.sortKeys() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。