Javascript 将x轴与零刻度d3条形图对齐

我有一个显示正负值的条形图。有没有办法使x轴与零值同步？此外，x轴上的刻度似乎不限于指定的5。有没有办法解决这些问题

var xAxis = d3.axisBottom()
    .scale(x)
    .tickFormat(d3.timeFormat("%b %Y"))    
    .ticks(5);

这是包含代码的小提琴

---

使用

y

比例平移轴：

g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(xAxis);

以下是更改后的代码：

var保证金={
前20名，
右:20,，
底数：70，
左：40
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.isoParse；
var x=d3.scaleBand（）.rangeRound（[0，宽度]，.05）。填充（0.1）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var xAxis=d3.axisBottom（）
.比例（x）
.tickFormat（d3.timeFormat（“%b%Y”））
.蜱（5）；
var yAxis=d3.axisLeft（）
.比例（y）
.蜱（5）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
var g=svg.append（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
风险值数据=[{
日期：“2016-03-02T00:00:00-05:00”，
价值：5
}, {
日期：“2016-04-03T00:00:00-05:00”，
价值：1
}, {
日期：“2016-05-04T00:00:00-05:00”，
值：-2
}, {
日期：“2016-06-05T00:00:00-05:00”，
价值：3
}, {
日期：“2016-07-06T00:00:00-05:00”，
价值：3
}, {
日期：“2016-08-07T00:00:00-05:00”，
价值：4
}, {
日期：“2016-09-08T00:00:00-05:00”，
价值：4
}, {
日期：“2016-11-09T00:00:00-05:00”，
价值：4
}, {
日期：“2016-12-10T00:00:00-05:00”，
值：-3
}, {
日期：“2017-01-11T00:00:00-05:00”，
价值：5
}, {
日期：“2017-02-12T00:00:00-05:00”，
价值：3
}, {
日期：“2017-03-13T00:00:00-05:00”，
值：-4
}, {
日期：“2017-04-14T00:00:00-05:00”，
价值：2
}, {
日期：“2017-05-15T00:00:00-05:00”，
价值：4
}];
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 值=+d.值；
});
x、 域（data.map）（函数（d）{
返回日期；
}));
y、 域（[-5,5]）；
g、 附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“价值”）；
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{
如果（d.值>0）{
返回“条蓝”；
}否则{
返回“红色条”；
}
})
.attr（“x”，函数（d）{
返回x（d.日期）；
})
.attr（“宽度”，x.带宽（））
.attr（“y”，函数（d）{
返回y（数学最大值（0，d值））；
})
.attr（“高度”，功能（d）{
返回数学值abs（y（d.value）-y（0））；
});
g、 附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）、+y（0）+”）
.呼叫（xAxis）
.axis{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
蓝色：悬停{
填充：钢蓝；
}
红色：悬停{
填充物：棕色；
}
瑞德先生{
填充物：红色；
}
蓝先生{
填充：蓝色；
}