如何在D3中使用嵌套和彙總函數來創建條形圖

Question

我是D3的新手，並且努力瞭解嵌套功能。我試圖制定一個條形圖，在2013年，2014年和2015年有三個不同的酒吧，每個酒吧的長度爲當年的參賽人數。

我看了很多例子，但我錯過了一些步驟。我想知道如何查看/排除嵌套對我的數據的影響（列出鍵和值等）。我還想知道如何在簡單的條形圖中使用數據（我要調用哪些數據以及我該如何返回'身高'等）

我已經在這裏做了一個小提琴http://jsfiddle.net/hellococomo/zz81pwkm/4/但無法弄清楚爲什麼我不能在酒吧得到任何高度。我非常感謝任何幫助。

這是我的示例代碼：

var fruit = [ 
    {"name": "Apple", "year": 2013, "win": "1"}, 
    {"name": "Banana", "year": 2013, "win": "1"}, 
    {"name": "Orange", "year": 2013, "win": "1"}, 
    {"name": "Grapefruit", "year": 2013, "win": "0"}, 
    {"name": "Grape", "year": 2014, "win": "0"}, 
    {"name": "Pineapple", "year": 2014, "win": "1"}, 
    {"name": "Melon", "year": 2014, "win": "1"}, 
    {"name": "Grape", "year": 2014, "win": "1"}, 
    {"name": "Pineapple", "year": 2014, "win": "1"}, 
    {"name": "Pineapple", "year": 2015, "win": "1"}, 
    ]; 

data = d3.nest() 
    .key(function(d){ return d.year }) // `GROUP BY date` 
    .rollup(function(values){ 
    // `values` is all the rows of a particular date 
    var counts = {}, keys = ['name', 'win'] 
    keys.forEach(function(key){ 
    counts[key] = d3.sum(values, function(d){ return d[key] }) 
    }) 
    return counts 
    }) 
    .entries(fruit) 

var svg = 
    d3.select('svg g') 
    .selectAll('rect') 
    .data(data) 
    .enter(); 

svg.append('rect') 
    .attr('x', function(d, i) {return i * 60 }) 
    .attr('y', 50) 
    .attr('width', 50) 
    .attr('height', function(d) { return d['win'] }) 
    .style('fill', 'steelblue'); 

Answer 1

如果您在每次登錄的Objects的價值你data（例如，using the Console in Chrome），你會看到Object都不具備的一個"win"財產。

{"key":"2013","values":{"name":0,"win":3}} 

其結果是，該<rect> S的高度沒有被正確設定（所有的人都被設定爲null）。

但是，你也可以看到你可以通過"values"Object訪問您的數據的"win"屬性：

.attr('height', function(d) { return d.values.win }) // <---- access .values first! 

將根據fruit的"wins"值設置"height"。

Answer 2

檢查了這一點：http://jsfiddle.net/yojm65nk/7/

.rollup(function(values){ 
    // `values` is all the rows of a particular date 
    var counts = {}; var keys = ['name', 'win'] 
    values.forEach(function(d){ 

for (var i = 0; i<keys.length; i++) { 
     counts[keys[i]] = d3.sum(values, function(d){ return d[keys[i]] }) 
} 

基本上在巢的功能，尤其是在你捲起你需要通過數據迭代暴露你的數據變量。一旦你有了，你可以相應地繪製條形圖。