Javascript 分组json数据以创建分组条形图

作为先驱，我对d3/js非常陌生。我正试图建立一个分组条形图的基础上，由迈克博斯托克提供。他的示例非常好，我理解大部分源代码，但我不知道如何将其转换为数据。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并调用它的方式来操作json数据。例如，我希望能够将“培根波塔贝拉奶油干酪融化”的卷进行分组，这样我就可以很容易地说“10月（10月）-15日，11月（11月）-1474年，12月（12月）-1623年”，或者以另一种方式，“10月，每个汉堡都有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方面的绘图，所以我认为在我克服这个障碍后，我将能够成功地构建条形图。非常感谢您提供的任何帮助——一份循序渐进的“傻瓜指南”（又名me）将是最好的，但如果您刚刚得到一般建议或其他链接，这也非常棒。

D3示例使用了许多不同类型的非常具体的数据结构。如果您的示例与示例的1:1不匹配，则您的示例可能会失败。

---

加载CSV后，将Bostock的示例对象（例如console.log（数据））与您的进行比较，并尝试提供相同的结构。

实际上，这方面的示例并不多。正如您所说，这方面的主要挑战是重新设计数据集

因此，您的数据集现在按汉堡类型分组：

[
   {
      "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);

完整的工作代码在这里：