在条形图D3 v5中将网格线与y轴对齐

Question

我对条形图有疑问。我插入了网格线，但是我得到的效果却不如从图像中看到的那样。

image

网格线未与y轴对齐。

代码：

var svg = d3.select("#chart");
var margin = {top: 10, bottom: 10, left: 40, right: 0};
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand()
    .range([margin.left, width - margin.right])
    .padding(0.1)
    //.paddingOuter(0.2);

var y = d3.scaleLinear()
    .rangeRound([height - margin.bottom, margin.top]);

var xAxis = function(g) {
        g
            .attr("transform", "translate(0," + (height - margin.bottom) + ")")
            .call(d3.axisBottom(x).tickSizeOuter(0));
        return g;
    };

var yAxis = function(g) {
        g
            .attr("transform", "translate(" + margin.left + ", " + (margin.bottom - margin.top) + ")")
            .call(d3.axisLeft(y));
        return g;
    };


function gridlines() {
    return d3.axisLeft(y).ticks();
}

svg.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(" + margin.left + "," + (margin.bottom - margin.top) + ")")
    .call(gridlines()
        .tickSize(-width)
        .tickFormat("")
    );

svg.append("g").attr("class", "x-axis");
svg.append("g").attr("class", "y-axis");

谢谢。