Question

从this example（感谢Steven Hall）修改堆积条形图没有问题，它使用.csv文件作为其数据源。我只是将csv更改为我的数据，然后是presto。

但是当我尝试使用不同格式的数据（在php应用程序中生成的本地json变量）使其工作时，它不会合作。

这是带有.csv的代码：

     d3.csv('_Poll_nonPoll_.csv', function (error, data) { 
// draw chart
});

这是我的：

     var data5_pre = [[{'hour':1,'Good':15000,'Bad':4000}],[{'hour':2,'Good':16000,'Bad':1000}],[{'hour':3,'Good':17000,'Bad':1500}],[{'hour':4,'Good':18000,'Bad':1100}]];

function makeChart(data5){ /* this line replaces the d3.csv */
      var data5 = data5_pre[0];
      var labelVar = 'hour';

      var varNames = d3.keys(data5[0])
          .filter(function(key) {
              return key !== labelVar;
          });


          color.domain(varNames);


          data5.forEach(function(d) {
              var y0 = 0;
              d.mapping = varNames.map(function(name) {
                  return {
                      name: name,
                      label: d[labelVar],
                      y0: y0,
                      y1: y0 += +d[name]
                  };
              });
              d.total = d.mapping[d.mapping.length - 1].y1;
          });

          console.log('prepped data5', data5);

          x.domain(data5.map(function(d) {
              return d.hour;
          }));
          y.domain([0, d3.max(data5, function(d) {
              return d.total;
          })]);

          var selection = svg.selectAll('.series')
              .data(data5)
              .enter().append('g')
              .attr('class', 'series')
              .attr('transform', function(d) {
                  return 'translate(' + x(d.hour) + ',0)';
              });

          selection.selectAll('rect')
              .data(function(d) {
                  return d.mapping;
              })
              .enter().append('rect')
              .attr('width', x.rangeBand())
              .attr('y', function(d) {
                  return y(d.y1);
              })
              .attr('height', function(d) {
                  return y(d.y0) - y(d.y1);
              })
              .style('fill', function(d) {
                  return color(d.name);
              })
              .style('stroke', 'grey');
}
makeChart(data5_pre);

正如您在this fiddle中所看到的，我只会绘制一小时的1小时数据。

我感到愚蠢，这应该很容易。但是无论我尝试for循环（关注data5.forEach部分），我都会得到相同的结果（如果它没有中断）。

我很难过。任何人都知道我错过了什么？

Answer 1

您的代码中有两个故障：

data5_pre的结构与d3.csv()提供的结构不符。此函数将解析的行作为对象数组传递给回调。在您的代码中，它是一个数组数组，每个数组都有一个对象。这应该纠正如下：
```
var data5_pre = [{
  'hour': 1,
  'Good': 15000,
  'Bad': 4000
}, {
  'hour': 2,
  'Good': 16000,
  'Bad': 1000
}, {
  'hour': 3,
  'Good': 17000,
  'Bad': 1500
}, {
  'hour': 4,
  'Good': 18000,
  'Bad': 1100
}];
```
在您的函数makeChart(data)中，您使用的是错误的作业
```
var data5 = data5_pre[0];
```
这需要更正为：
```
var data5 = data5_pre;
```

有关工作示例，请参阅更新的JSFiddle。

d3循环遍历本地数据变量以制作堆积条形图

1 个答案: