Question

我是D3的新手并且正在努力了解嵌套功能。我试图让它制作一个条形图，这个条形图多年来会有三个不同的条形图＆＃39; 2013＆＃39; 2014＆＃39;和＆＃39; 2015＆＃39;并且每个条的长度是该年的条目数。

我看了很多例子，但我错过了一些步骤。我想知道如何查看/解决嵌套对我的数据的影响（列出键和值等）。我还想知道如何在简单的条形图中使用数据（什么数据）我打电话给我，我要回报什么？＆＃39;身高等等。）

我在这里做了一个小提琴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

检查出来：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]] })
}

基本上在您的嵌套函数中，特别是在您的汇总中，您需要遍历数据以公开您的数据变量。完成后，您可以相应地绘制条形图。

Answer 2

如果您记录Objects中每个data的值（例如，using the Console in Chrome），您会发现Object没有一个"win"财产。

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

因此，<rect>的高度未正确设置（所有这些都设置为null）。

但是，您还可以看到，您可以通过"win" "values"访问数据的Object属性：

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

将根据"height"中的"wins"值设置fruit。

如何在D3中使用嵌套和汇总功能来创建条形图

2 个答案: