javascript - d3分组条形图创建问题

Question

我想使用 d3 创建分组条形图，但我看到的所有示例的数据格式都与我的不同，我无法弄清楚如何使用我的数据格式绘制图表。

例如:http://bl.ocks.org/mbostock/3887051

这是我的数据:

var data =[
{
  "data": [
    [
      "2016-01-21T01:20:00.000Z",
      1.41818181818182
    ],
    [
      "2016-01-21T02:28:00.000Z",
      1.90661764705882
    ],
    [
      "2016-01-21T03:36:00.000Z",
      1.66764705882353
    ],
    [
      "2016-01-21T04:44:00.000Z",
      1.51691176470588
    ],
    [
      "2016-01-21T05:52:00.000Z",
      1.40955882352941
    ],
    [
      "2016-01-21T07:00:00.000Z",
      1.46323529411765
    ],
    [
      "2016-01-21T08:08:00.000Z",
      1.48308823529412
    ],
    [
      "2016-01-21T09:16:00.000Z",
      1.89384615384615
    ]
  ],
  "label": "a"
},
{
  "data": [
    [
      "2016-01-21T01:20:00.000Z",
      4.98701298701299
    ],
    [
      "2016-01-21T02:28:00.000Z",
      5.0
    ],
    [
      "2016-01-21T03:36:00.000Z",
      4.94852941176471
    ],
    [
      "2016-01-21T04:44:00.000Z",
      4.91176470588235
    ],
    [
      "2016-01-21T05:52:00.000Z",
      4.81617647058824
    ],
    [
      "2016-01-21T07:00:00.000Z",
      5.0
    ],
    [
      "2016-01-21T08:08:00.000Z",
      4.94117647058824
    ],
    [
      "2016-01-21T09:16:00.000Z",
      4.96969696969697
    ]
  ],
  "label": "b"
}
];

所以请帮助我使用我的数据格式创建分组条形图。

我到目前为止所写的代码:CODE

Answer 1

而不是这个:

   .attr("height", function(d) {
        return y(d[1]); //Note this is returning data
      })

应该是

 .attr("height", function(d) {
    return height - y(d[1]); //Note this is returning data
  })

您没有制作另一个比例来定位条形，因此条形相互重叠。

var x1 = d3.scale.ordinal();
x1.domain(data.map(function(d){return d.label})).rangeRoundBands([0, x.rangeBand()]);

然后在组中，您需要进行如下转换以对齐 a 条和 b 条:

  .attr("transform", function(d,i) { 
    var r = parseFloat(x1(d.label));
    if (r == 0){
      r = r-5;
    }
    return "translate(" +  r  + ",0)"; 

  })

工作代码here

希望这有帮助!