D3.js 条形图条形之间的d3js网格线

我创建了一个简单的d3js垂直条形图。我知道，通常，要创建网格线，我会使用“tickSize”调用，并给它们一个类似于轴的高度或宽度

var yGridLine = d3.svg.axis()
  .scale(yScale)
  .tickSize(-width, 0 ,0)
  .tickFormat("")
  .orient("left");

上面的代码将创建水平网格线。因此，如果我想创建垂直网格线，那么我将修改方向和参考轴（类似于下面未测试但假设正确的代码）

现在，问题是，当使用这种方法时，垂直网格线被创建在竖直杆的中间（或者在水平杆图的情况下，然后在水平杆的中间创建水平网格线），这在视觉上是不愉快的，而不是根据要求的。我想让垂直网格线出现在垂直条之间（即，在刻度之间的中心点）。我该怎么做

例子 ，您将发现许多图表，其中垂直网格线位于刻度之间，而不是中心。这就是我想要实现的，我的问题是我如何实现这一点

谢谢

整个代码：

var数据=[{
名称：“赫曼特”，
年龄:20
}, {
姓名：“Vinay”，
年龄:55
}, {
名称：“维卡斯”，
年龄:56
}, {
名称：“阿伦”，
年龄:88
}, {
姓名：“瓦伦”，
年龄:34
}, {
姓名：“Ajay”，
年龄:77
}],
w=600，
h=300，
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=w-边距。左侧-边距。右侧，
高度=h-边距.顶部-边距.底部；
var mySvg=d3.select（“body”）.append（“svg”）.attr({
宽度：w，
身高：h
}).附加（“g”）
.attr（“transform”、“translate”（“+margin.left+”、“+margin.top+”））；
var xScale=d3.scale.ordinal（）
.domain（data.map）（函数（d）{
返回d.name；
}))
.范围带（[0，宽度]）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.age；
})])
.范围（[高度，0]）；
变量linearColorScale=d3.scale.linear（）
.domain（[0，data.length]）
.范围（[“#e74c3c”、“#8e44ad”]）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
var yGridLine=d3.svg.axis（）
.刻度（yScale）
.tickSize（-width，0，0）
.tick格式（“”）
.东方（“左”）；
var ordinalColorScale=d3.scale.category20（）；
mySvg.append（“g”）
.classed（“网格线”，真）
.attr（“转换”、“转换（0,0）”）
.呼叫（yGridLine）；
mySvg.selectAll（“rect”）.data（data）.enter（）
.append（“rect”）
.attr（“x”，函数（d）{
返回xScale（d.name）；
})
.attr（“y”，函数（d，i）{
返回yScale（d.age）；
})
.attr（“宽度”，函数（d）{
返回xScale.rangeBand（）；
})
.attr（“高度”，功能（d）{
返回高度-yScale（d.age）
})
.样式（“填充”，功能（d，i）{
返回顺序颜色标度（i）；
})
mySvg.selectAll（“文本”）.data（数据）
.输入（）
.append（“文本”）
.classed（“bar”，真）
.attr（“x”，函数（d）{
返回xScale（d.name）+xScale.rangeBand（）/2；
})
.attr（“dx”，0）
.attr（“y”，函数（d，i）{
返回yScale（d.age）；
})
.attr（“dy”，-6）
.文本（功能（d，i）{
返回d.age；
});
mySvg.append（“g”）
.classed（“轴”，真）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
mySvg.append（“g”）
.classed（“轴”，真）
.attr（“转换”、“转换（0,0）”）
.呼叫（yAxis）
svg{
边框：1px实心#ccc；
}
svg矩形{
形状渲染：边缘清晰；
}
.酒吧{
填写：#000；
文本锚定：中间；
字体大小：20px；
}
.轴线路径，
.轴线{
填充：无；
形状渲染：边缘清晰；
行程：#666；
}
.网格线路径，
.网格线{
填充：无；
形状渲染：边缘清晰；
行程：#e4；
}
您可以通过简单地将
.gridLines
转换为一个条的一半宽度来实现这一点


var数据=[{
名称：“赫曼特”，
年龄:20
}, {
姓名：“Vinay”，
年龄:55
}, {
名称：“维卡斯”，
年龄:56
}, {
名称：“阿伦”，
年龄:88
}, {
姓名：“瓦伦”，
年龄:34
}, {
姓名：“Ajay”，
年龄:77
}],
w=600，
h=300，
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=w-边距。左侧-边距。右侧，
高度=h-边距.顶部-边距.底部；
var mySvg=d3.select（“body”）.append（“svg”）.attr({
宽度：w，
身高：h
}).附加（“g”）
.attr（“transform”、“translate”（“+margin.left+”、“+margin.top+”））；
var xScale=d3.scale.ordinal（）
.domain（data.map）（函数（d）{
返回d.name；
}))
.范围带（[0，宽度]）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.age；
})])
.范围（[高度，0]）；
变量linearColorScale=d3.scale.linear（）
.domain（[0，data.length]）
.范围（[“#e74c3c”、“#8e44ad”]）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
var yGridLine=d3.svg.axis（）
.scale（xScale）
.tickSize（-height，0，0）
.格式（“”）；
var ordinalColorScale=d3.scale.category20（）；
mySvg.append（“g”）
.classed（“网格线”，真）
.attr（“transform”、“translate”（+[xScale.rangeBand（）/2，height]+”）
.呼叫（yGridLine）；
mySvg.selectAll（“rect”）.data（data）.enter（）
.append（“rect”）
.attr（“x”，函数（d）{
返回xScale（d.name）；
})
.attr（“y”，函数（d，i）{
返回yScale（d.age）；
})
.attr（“宽度”，函数（d）{
返回xScale.rangeBand（）；
})
.attr（“高度”，功能（d）{
返回高度-yScale（d.age）
})
.样式（“填充”，功能（d，i）{
返回顺序颜色标度（i）；
})
mySvg.selectAll（“文本”）.data（数据）
.输入（）
.append（“文本”）
.classed（“bar”，真）
.attr（“x”，函数（d）{
返回xScale（d.name）+xScale.rangeBand（）/2；
})
.attr（“dx”，0）
.attr（“y”，函数（d，i）{
返回yScale（d.age）；
})
.attr（“dy”，-6）
.文本（功能（d，i）{
返回d.age；
});
mySvg.append（“g”）
.classed（“axis”，
var xGridLine = d3.svg.axis()
  .scale(xScale)
  .tickSize(-height, 0 ,0)
  .tickFormat("");