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调用的结果。我的目标是以一种我可以轻松地在d3中绑定它并调用它的方式来操纵json数据。例如，我希望能够在Brioche＆＃34;＆＃34;＆＃34; Bacon Portabella Melt上分组。在某种程度上，我可以很容易地说，10月（第10个月） - 15月，11月（11月） - 1474年，12月（12月） - 1623年和＃34;或以其他方式，＆＃34; 10月，每个汉堡都有x体积;十一月......＆＃34;。

要获取数据绑定，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方面的绘图，所以我想在克服了这个障碍后，我将能够成功构建我的条形图。非常感谢任何帮助 - 一步一步的＆＃34;对于假人＆＃34; （AKA me）指南会是最好的，但是如果您只是获得了一般建议或其他链接指向我，那也很棒。

Answer 1

D3示例使用许多不同类型的非常具体的数据结构。如果你的1：1不匹配示例的那个，你的样本可能会失败。一旦加载了CSV（例如console.log（data）），就比较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/。

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

2 个答案: