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

然后在组中你需要给出一个像这样的变换来对齐一个条和b条：

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

  })

工作代码here

希望这有帮助！

d3分组条形图创建问题

1 个答案: