D3 分组条形图创建问题

d3 grouped bar chart creation issue

本文关键字：创建 问题 条形图 D3      更新时间：2023-09-26

我想使用 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"
}
];

因此，请帮助我使用我的数据格式创建分组条形图。

到目前为止我写的代码：代码

取而代之的是： 

   .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)"; 
  })

此处的工作代码

希望这有帮助！

相关文章：