d3通過本地數據變量循環以製作堆疊條形圖

Question

從this example（謝絕Steven Hall）使用.csv文件作爲其數據源修改堆疊條形圖我沒有問題。我只是將csv更改爲我的數據，然後快速完成。

但是，當我設法得到它在不同的格式使用數據（在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

有你的代碼中有兩處毛刺：

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 
   }]; 
   

2. 裏面的功能makeChart(data)您使用的是有缺陷的分配

   var data5 = data5_pre[0]; 
   

   這需要更正爲：

   var data5 = data5_pre; 
   

見更新的JSFiddle爲一個工作示例。