Javascript D3.js折线图网格问题

我使用d3.js创建了一个折线图，并在图中添加了x和y网格。只有y轴网格线出现，而不是x轴网格线

我想创建如下图所示的网格，并在y轴的顶部创建一条线，使其看起来像完美的矩形

var数据=[{
x:‘2012年5月1日’，
y:5
}, {
x:‘2012年4月30日’，
y:28
}, {
x:‘2012年4月27日’，
y:58
}, {
x:‘2012年4月26日’，
y:88
}, {
x:‘2012年4月25日’，
y:8
}, {
x:‘2012年4月24日’，
y:48
}, {
x:‘2012年4月23日’，
y:28
}, {
x:‘2012年4月20日’，
y:68
}, {
x:‘2012年4月19日’，
y:8
}, {
x:‘2012年4月18日’，
y:58
}, {
x:‘2012年4月17日’，
y:5
}, {
x:‘2012年4月16日’，
y:80
}, {
x:‘2012年4月13日’，
y:38
}];
var保证金={
前30名，
右:20,，
底数：35，
左：50
},
宽度=1200-（边距.左+边距.右）；
高度=360-2*（页边距.顶部+页边距.底部）；
//解析日期/时间
var parseDate=d3.time.format（“%d-%b-%y”）.parse；
var xScale=d3.time.scale（）.range（[0，width]）；
var yScale=d3.scale.linear（）.range（[height，0]）；
var xAxis=d3.svg.axis（）.scale（xScale）
.方向（“底部”）.刻度（0）.刻度大小（0）
.tickFormat（“”）.outerTickSize（0）；
var yAxis=d3.svg.axis（）.scale（yScale）
.orient（“left”）.tickSize（0）。ticks（0）
.格式（“”）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“类别”、“背景颜色”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
函数make_x_轴（）{
返回d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.滴答声（5）
}
//y轴网线的函数
函数make_y_轴（）{
返回d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.蜱（5）；
}
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成x轴（）
.tickSize（-height，0，0）
.tick格式（“”）
);
//绘制y轴网格线
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成y轴（）
.tickSize（-width，0，0）
.tick格式（“”）
);
xScale.domain（d3.extent）（数据，函数（d）{
返回日期（d.x）；
}));
yScale.domain（[0，d3.max（数据，函数（d））{
返回d.y；
})]);
数据排序（函数（a，b）{
返回解析日期（a.x）-解析日期（b.x）；
});
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//界定界线
var lineGen=d3.svg.line（）
.插入（“单调”）
.x（功能（d）{
返回xScale（解析日期（d.x））；
})
.y（功能（d）{
返回y刻度（d.y）；
});
append（'path'）
.attr（“类”、“行”）
.style（“笔划”、“红色”）
.attr（'d'，lineGen（数据））
.line{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
.覆盖{
填充：无；
指针事件：全部；
}
.焦点圈{
填充：无；
笔画：钢蓝；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：2；
形状渲染：边缘清晰；
}
.grid.勾选{
笔画：浅灰色；
笔划不透明度：0.7；
形状渲染：边缘清晰；
}
.网格路径{
笔画宽度：0；
}
参见JSFIDLE上的另一个示例


var数据=[{
x:‘2012年5月1日’，
y:5
}, {
x:‘2012年4月30日’，
y:28
}, {
x:‘2012年4月27日’，
y:58
}, {
x:‘2012年4月26日’，
y:88
}, {
x:‘2012年4月25日’，
y:8
}, {
x:‘2012年4月24日’，
y:48
}, {
x:‘2012年4月23日’，
y:28
}, {
x:‘2012年4月20日’，
y:68
}, {
x:‘2012年4月19日’，
y:8
}, {
x:‘2012年4月18日’，
y:58
}, {
x:‘2012年4月17日’，
y:5
}, {
x:‘2012年4月16日’，
y:80
}, {
x:‘2012年4月13日’，
y:38
}];
var保证金={
前30名，
右:20,，
底数：35，
左：50
},
宽度=1200-（边距.左+边距.右）；
高度=360-2*（页边距.顶部+页边距.底部）；
//解析日期/时间
var parseDate=d3.time.format（“%d-%b-%y”）；
var xScale=d3.time.scale（）.range（[0，width]）；
var yScale=d3.scale.linear（）.range（[height，0]）；
xScale.domain（d3.extent）（数据，函数（d）{
返回parseDate.parse（d.x）；
}));
yScale.domain（[0，d3.max（数据，函数（d））{
返回d.y；
})]);
var xAxis=d3.svg.axis（）.scale（xScale）
.方向（“底部”）.刻度（0）.刻度大小（0）
.tickFormat（“”）.outerTickSize（0）；
var yAxis=d3.svg.axis（）.scale（yScale）
.orient（“left”）.tickSize（0）。ticks（0）
.格式（“”）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“类别”、“背景颜色”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
函数make_x_轴（）{
返回d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.滴答声（25）
}
//y轴网线的函数
函数make_y_轴（）{
返回d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.蜱（25）；
}
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成x轴（）
.尺寸（高度，0，0）
.tick格式（“”）
);
//绘制y轴网格线
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成y轴（）
.tickSize（-width，0，0）
.tick格式（“”）
);
数据排序（函数（a，b）{
返回parseDate.parse（a.x）-parseDate.parse（b.x）；
});
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//界定界线
var lineGen=d3.svg.line（）
.插入（“单调”）
.x（功能（d）{
返回xScale（parseDate.parse（d.x））；
})
.y（功能（d）{
返回y刻度（d.y）；
});
append（'path'）
.attr（“类”、“行”）
.style（“笔划”、“红色”）
.attr（'d'，lineGen（数据））
.line{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
.覆盖{
填充：无；
指针事件：全部；
}
.焦点圈{
填充：无；
笔画：钢蓝；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：2；
形状渲染：清晰