將json數據分組以創建分組條形圖

Question

作爲一個先驅，我對d3/js非常陌生。我試圖建立一個基於Mike Bostock提供的example的分組條形圖。他的例子非常好，我理解了大部分源代碼，但我不知道如何將它翻譯成我的數據。 mbostock示例提供的數據是csv，我的數據是json - 不幸的是，這些格式有很大的不同。

mbostock csv示例在頁面上可用，我在下面粘貼了我的json數據。

{"data":[{"id":455211,"name":"Bacon Portabella Melt on Brioche","volume":15,"trend":{"years":2013,"quarters":4,"months":10}},{"id":455097,"name":"Pretzel Bacon Cheeseburger","volume":287,"trend":{"years":2013,"quarters":4,"months":10}},{"id":455315,"name":"Spicy Chipotle Jr Cheeseburger","volume":0,"trend":{"years":2013,"quarters":4,"months":10}},{"id":455211,"name":"Bacon Portabella Melt on Brioche","volume":1474,"trend":{"years":2013,"quarters":4,"months":11}},{"id":455097,"name":"Pretzel Bacon Cheeseburger","volume":155,"trend":{"years":2013,"quarters":4,"months":11}},{"id":455315,"name":"Spicy Chipotle Jr Cheeseburger","volume":0,"trend":{"years":2013,"quarters":4,"months":11}},{"id":455211,"name":"Bacon Portabella Melt on Brioche","volume":1623,"trend":{"years":2013,"quarters":4,"months":12}},{"id":455097,"name":"Pretzel Bacon Cheeseburger","volume":47,"trend":{"years":2013,"quarters":4,"months":12}},{"id":455315,"name":"Spicy Chipotle Jr Cheeseburger","volume":13,"trend":{"years":2013,"quarters":4,"months":12}}],"countInfo":{"globalTotal":3649,"total":4359},"metadata":{"runDate":1435260902236,"resultSource":0}} 

該數據是API調用的結果。我的目標是以一種方式操作json數據，以便我可以在d3中輕鬆地綁定它並調用它。例如，我希望能夠以「十月（十月） - 十五，十一月（十一月） - 十四月七日，十二月（十二月） - 十月十五日 - 十一月1623「，或者換句話說，」十月份，每個漢堡都有x卷，11月......「。

要坐上開往數據，mbostock使用以下：

var ageNames = d3.keys(dataset[0]).filter(function(key) { return key !== "State"; }); 

dataset.forEach(function(d) { 
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
}); 

但我似乎無法遵循這個，因爲我繼續運行在foreach函數後會返回一個空數組。

我瞭解SVG方面的繪圖，所以我想在我克服這個障礙後，我可以成功地建立我的條形圖。任何援助非常感謝 - 一步一步的「傻瓜」（AKA我）指導將是最好的，但如果你剛剛得到一般性意見或另一個鏈接指向我，這也是非常棒的。

Answer 1

D3示例使用許多不同類型的非常具體的數據結構。如果你的示例不符合1：1，你的示例可能會失敗。 比較加載CSV（例如console.log（數據））後的Bostock示例對象並嘗試提供相同的結構。

Answer 2

真的沒有太多這方面的例子。正如你所說，這方面的主要挑戰是重新設計數據集。

所以你的數據集，現在組合在漢堡類型：

[ 
    { 
     "name":"Bacon Portabella Melt on Brioche", 
     "value":[ 
     { 
      "id":455211, 
      "name":"Bacon Portabella Melt on Brioche", 
      "volume":15, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":10 
      }, 
      "date":"2013-10" 
     }, 
     { 
      "id":455211, 
      "name":"Bacon Portabella Melt on Brioche", 
      "volume":1474, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":11 
      }, 
      "date":"2013-11" 
     }, 
     { 
      "id":455211, 
      "name":"Bacon Portabella Melt on Brioche", 
      "volume":1623, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":12 
      }, 
      "date":"2013-12" 
     } 
     ] 
    }, 
    { 
     "name":"Pretzel Bacon Cheeseburger", 
     "value":[ 
     { 
      "id":455097, 
      "name":"Pretzel Bacon Cheeseburger", 
      "volume":287, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":10 
      }, 
      "date":"2013-10" 
     }, 
     { 
      "id":455097, 
      "name":"Pretzel Bacon Cheeseburger", 
      "volume":155, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":11 
      }, 
      "date":"2013-11" 
     }, 
     { 
      "id":455097, 
      "name":"Pretzel Bacon Cheeseburger", 
      "volume":47, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":12 
      }, 
      "date":"2013-12" 
     } 
     ] 
    }, 
    { 
     "name":"Spicy Chipotle Jr Cheeseburger", 
     "value":[ 
     { 
      "id":455315, 
      "name":"Spicy Chipotle Jr Cheeseburger", 
      "volume":0, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":10 
      }, 
      "date":"2013-10" 
     }, 
     { 
      "id":455315, 
      "name":"Spicy Chipotle Jr Cheeseburger", 
      "volume":0, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":11 
      }, 
      "date":"2013-11" 
     }, 
     { 
      "id":455315, 
      "name":"Spicy Chipotle Jr Cheeseburger", 
      "volume":13, 
      "trend":{ 
       "years":2013, 
       "quarters":4, 
       "months":12 
      }, 
      "date":"2013-12" 
     } 
     ] 
    } 
] 

現在張貼 指定X0軸在漢堡的名字：

//burger names makes the x0 axis 
x0.domain(newData.map(function (d) { 
    return d.name; 
})); 

指定的年份和月份X1軸：

//x1 domain on month and year 
x1.domain(dates).rangeRoundBands([0, x0.rangeBand()]); 

然後爲數據集製作矩形

最後作出年份和月份的傳說

var legend = svg.selectAll(".legend") 
    .data(dates.slice().reverse()) 
    .enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function (d, i) { 
    return "translate(0," + i * 20 + ")"; 
}); 

legend.append("rect") 
    .attr("x", width - 18) 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("fill", color); 

完整的工作代碼是在這裏：http://jsfiddle.net/cyril123/f3gayk2d/12/。