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

借助d3.group()方法，我們可以將可迭代的數據結構分組到一個映射中，其中將鍵定義為可迭代的元素，並將值定義為數組。

用法:

d3.group( iterable, ...keys )

返回值：它返回具有鍵作為元素和值作為數組的映射。

注意：要執行以下示例，您必須使用此命令提示符安裝d3庫，我們必須執行以下命令。

npm install d3

範例1：在此示例中，我們可以通過使用d3.group()方法看到這一點。我們可以從可迭代的組中獲取映射，其中鍵是元素，值是數組。

Javascript

// Defining d3 contrib variable   
var d3 = require('d3'); 
  
data = [ 
  {name:"ABC", amount:"34.0",   date:"11/12/2015"}, 
  {name:"DEF", amount:"120.11", date:"11/12/2015"}, 
  {name:"MNO", amount:"12.01",  date:"01/04/2016"}, 
  {name:"XYZ", amount:"34.05",  date:"01/04/2016"} 
] 
  
var grouped_data = d3.group(data, d => d.name) 
  
console.log(grouped_data)

輸出：

Map {
‘ABC’ => [ { name:‘ABC’, amount:‘34.0’, date:’11/12/2015′ } ],
‘DEF’ => [ { name:‘DEF’, amount:‘120.11’, date:’11/12/2015′ } ],
‘MNO’ => [ { name:‘MNO’, amount:‘12.01’, date:’01/04/2016′ } ],
‘XYZ’ => [ { name:‘XYZ’, amount:‘34.05’, date:’01/04/2016′ } ]
}

範例2：

Javascript

// Defining d3 contrib variable   
var d3 = require('d3'); 
  
data = [ 
  {name:"ABC", amount:"34.0",   date:"11/12/2015"}, 
  {name:"DEF", amount:"120.11", date:"11/12/2015"}, 
  {name:"MNO", amount:"12.01",  date:"01/04/2016"}, 
  {name:"XYZ", amount:"34.05",  date:"01/04/2016"} 
] 
  
var grouped_data = d3.group(data,  
        d => d.name, d => d.amount) 
  
console.log(grouped_data)

輸出：

Map {
  'ABC' => Map { '34.0' => [ [Object] ] },
  'DEF' => Map { '120.11' => [ [Object] ] },
  'MNO' => Map { '12.01' => [ [Object] ] },
  'XYZ' => Map { '34.05' => [ [Object] ] } 
}

相關用法

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