總和D3 .rollup

Question

我試圖讓每個按鍵的總和平均在對象的嵌套數組，如下所示：

var data = [ 
    {department:'Electro',quant:{M:30, T:20, W:51, R:22, F:35 }}, 
    {department:'Beauty'',quant:{M:50, T:32, W:75, R:61, F: 45}}, 
    {department:'Apparel'',quant:{M:62, T:42, W:135, R: 82, F:89}}, 
    {department:'Misc',quant:{M:89, T:54, W:103, T:94, F:90}} 
]; 

所以我需要的總和各部門分開。即總和= {'Elecro'：158，'Beauty'：263}

我正在使用匯總方法，但examples不適用於嵌套數組。

var deptSum = d3.nest() 
.key(function(d) { return d.dept; }) 
.rollup(function(v) { return { 
    count: v.length, 
    total: d3.sum(v, function(d) {return d.quant; }), 
    avg: d3.mean(v, function(d) {return d.quant; }) 
}; }) 
.entries(data) 

的console.log（JSON.stringify（deptSum））

不過是給我的0的款項。

Answer 1

有一個D3方法來獲得彙總內的總和（以及平均值）。但問題是，既d3.sum和d3.mean期待一個陣列，但quant只是一個對象：

quant: {M:30, T:20, W:51, R:22, F:35 }; 

解決方案：使用D3方法來獲得屬性值，稱爲d3.values。根據documentation，它：

返回包含指定對象（關聯數組）的屬性值的數組。

因此，您rollup應該是：

.rollup(function(v) { 
    return { 
     count: v.length, 
     total: d3.sum(d3.values(v[0].quant)), 
     avg: d3.mean(d3.values(v[0].quant)) 
    }; 
}) 

這裏是一個演示：

var data = [ 
 
    {department:'Electro',quant:{M:30, T:20, W:51, R:22, F:35 }}, 
 
    {department:'Beauty',quant:{M:50, T:32, W:75, R:61, F: 45}}, 
 
    {department:'Apparel',quant:{M:62, T:42, W:135, R: 82, F:89}}, 
 
    {department:'Misc',quant:{M:89, T:54, W:103, T:94, F:90}} 
 
]; 
 

 
var deptSum = d3.nest() 
 
.key(function(d) { return d.department; }) 
 
.rollup(function(v) { return { 
 
    count: v.length, 
 
    total: d3.sum(d3.values(v[0].quant)), 
 
    avg: d3.mean(d3.values(v[0].quant)) 
 
}; }) 
 
.entries(data) 
 

 
console.log(deptSum)

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

你甚至都不需要爲D3，這裏是一個純JS的解決方案：

var sumData = data.map(function(d) { 
    var sum = Object.values(d.quant).reduce((a, b) => a + b) 
    return { department: d.department, sum: sum} 
}).reduce(function(result, item) { 
    result[item.department] = item.sum; 
    return result; 
}, {}) 

會給你{"Electro":158,"Beauty":263,"Apparel":410,"Misc":376}

見https://jsfiddle.net/96msy7jd/1