将json数据分组以创建分组的条形图

Question

As a precursor, I am very new to d3/js. I am attempting to build a grouped bar chart based off an example provided by Mike Bostock. His example is really good and I understand most of the source code, but I don't know how to translate it to my data. The data provided by the mbostock example is in csv, and my data is json -- and unfortunately the formats are very different.

The mbostock csv example is available on the page, and I've pasted my json data below.

{"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}}

This data is the result of an API call. My goal is to manipulate the json data in a way that I can easily bind it in d3 and call it. For instance, I want to be able to group volumes for "Bacon Portabella Melt on Brioche" in a way that I can easily say "October (month 10) - 15, November (month 11) - 1474, December (month 12) - 1623", or in another way, "In October, each of the burgers had x volume; in November...".

To get the data bound, mbostock uses the following:

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

But I can't seem to follow this as I keep returning an empty array after running the forEach function.

I understand the drawing with SVG aspect, so I think after I get over this hurdle I'll be able to build my bar chart successfully. Any assistance is greatly appreciated -- a step-by-step "for dummies" (AKA me) guide would be best, but if you've just got general advice or another link to point me towards, that is awesome as well.

Answer 1

D3 examples use many different types of quite specific data structures. If yours does not 1:1 match the example's one, your sample will probably fail. Compare the Bostock's sample object once the CSV is loaded (eg console.log(data)) with yours and try to provide the same structure.

Answer 2

Really there are not many examples on this. The main challenge in this, as you said, is re-engineering the dataset.

So your dataset is now grouped on burger types:

[
   {
      "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"
         }
      ]
   }
]   

Now post that specify the x0 axis on burger names:

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

specify the x1 axis on month and year:

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

Then make rectangles for the data set

Finally make the legends on year and month

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);

Full working code is here: http://jsfiddle.net/cyril123/f3gayk2d/12/ .