Javascript 使用D3对齐问题的多重/分组条形图

我正在使用D3创建一个分组条形图。我已经编写了代码，并且显示了条形图，但不正确。一些条位于x轴下方，另一些条位于图形顶部，而不是从0开始。我想不出这个问题的原因

var保证金={
前20名，
右:30,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var z=d3.scale.category20c（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var parseDate=d3.time.format（“%Y-%m-%dT%H:%m:%S.%LZ”）；
风险值数据=[{
“数据”：[
[
“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
]
],
“标签”：“a”
}, {
“数据”：[
[
“2016-01-21T01:20:00.000Z”，
4.98701298701299
],
[
“2016-01-21T02:28:00.000Z”，
5
],
[
“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
],
[
“2016-01-21T08:08:00.000Z”，
4.94117647058824
],
[
“2016-01-21T09:16:00.000Z”，
4.96969696969697
]
],
“标签”：“b”
}];
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.9）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.刻度（x）.刻度大小（0）
.orient（“底部”）.innerTickSize（-height）。outerTickSize（0）
.tickFormat（d3.time.format（“%H:%M”）；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（“left”）.innerTickSize（-width）。outerTickSize（0）；
var ary=[]；
data.forEach（函数（d）{
ary.push（d.data）；
});
x、 域（ary[0]。映射（函数（d）{
返回parseDate.parse（d[0]）；
}));
y、 域（[0，d3.max（d3.merge（ari），函数（d）{
console.log（d.y0+d.y）；//这是NaN=不是数字
//返回d.y0+d.y；
return d[1]；//如果需要，则返回网格线
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
var layer=svg.selectAll（“.layer”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“层”）
.样式（“填充”，功能（d，i）{
返回z（i）；
});
图层。选择全部（“rect”）
.数据（功能（d）{
返回数据；
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回x（parseDate.parse（d[0]）；
})
.attr（“y”，函数（d）{
console.log（d[1]）；
返回y（d[1]）；//注意这是返回数据
})
.attr（“高度”，功能（d）{
返回y（d[1]）；//注意这是返回数据
})
.attr（“宽度”，x.rangeBand（）-1）
text.inner-circle{
字体大小：400；
字体大小：12px；
文本转换：大写；
}
文本{
字体大小：400；
字体大小：36px；
字体系列：“公制常规”、“公制”；
文本对齐：居中；
字体风格：普通；
文本转换：大写；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：2；
形状渲染：边缘清晰；
}
.grid.勾选{
笔画：浅灰色；
笔划不透明度：0.7；
形状渲染：边缘清晰；
}
.网格路径{
笔画宽度：0；
}
您缺少以下内容：

.attr("y", function(d) {
  return height - y(d[1]); //<-- offset y position from height
})


完整代码：



内圆{
字体重量：400；
字体大小：12像素；
文本转换：大写；
}
text.inner-text{
字体重量：400；
字体大小：36像素；
字体-系列：'公制常规'，'公制'；
文本对齐：居中；
字体风格：正常；
文本转换：大写；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：2；
形状渲染：边缘清晰；
}
.grid.tick{
笔画：浅灰色；
笔划不透明度：0.7；
形状渲染：边缘清晰；
}
.网格路径{
笔划宽度：0；
}
var保证金={
前20名，
右:30,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var z=d3.scale.category20c（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var parseDate=d3.time.format（“%Y-%m-%dT%H:%m:%S.%LZ”）；
风险值数据=[{
“数据”：[
[
“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.4
  ...
  .enter().append("rect")
  .attr("x", function(d, i, j) {
    // j is the group
    if (j === 0)
      return x(parseDate.parse(d[0])) - x.rangeBand() / 2;
    else
      return x(parseDate.parse(d[0])) + x.rangeBand() / 2;
  })
  ...