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

則該組中，您將需要給一個變換像這樣allign的酒吧和B酒吧：

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

    }) 

工作代碼here

希望這有助於！