Как добавить вертикальную линию сетки на мою диаграмму d3

Я хотел бы знать, что я делаю неправильно. Я следовал некоторым руководствам (Вертикальная сеткаПростые линии сетки в d3js v4) о создании линий сетки в 3DJS V4, и я попытался объединить их код со своим собственным.

Моя диаграмма выглядит так:

Однако я хотел бы иметь несколько вертикальных линий сетки в svg, чтобы диаграмму было легче читать.

Мой код:

function makeChart(desktopData,mobileData,tabletData){
    console.log(desktopData);
    var WIDTH = 1200,
        HEIGHT = 300,
        MARGINS = {
                top:20,
            right:20,
            bottom:20,
            left:50
        }
    var vis = d3.select("#visualisation"),
        WIDTH = 1200,
        HEIGHT = 300,
        MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        xScale = d3.scale.linear().range([MARGINS.left,WIDTH-MARGINS.right]).domain([00,23]),

        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,100]),

        xAxis = d3.svg.axis()
            .scale(xScale)


        yAxis = d3.svg.axis()
            .scale(yScale)
            .ticks(10)
            .tickPadding(20)
            .orient("left");

    vis.append("svg:g")
        .attr("class","axis")
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
        .call(xAxis);

    vis.append("svg:g")
        .attr("class","axis")
        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);

    var lineGen = d3.svg.line()
        .x(function(d){
            return xScale(d.uur);
        })
        .y(function(d){
            return yScale(d.pageviews);
        });

    vis.append('svg:path')
        .attr('d', lineGen(desktopData))
        .attr('stroke','deepskyblue')
        .attr('stroke-width',2)
        .attr('fill','none');

    vis.append('svg:path')
        .attr('d', lineGen(mobileData))
        .attr('stroke','orange')
        .attr('stroke-width',2)
        .attr('fill','none');

    vis.append('svg:path')
        .attr('d', lineGen(tabletData))
        .attr('stroke','deeppink')
        .attr('stroke-width',2)
        .attr('fill','none');



// gridlines in y axis function
    function make_y_gridlines() {
        return d3.svg.axis(yScale)
    }

    // add the Y gridlines
    vis.append("g")
        .attr("class", "grid")
        .call(make_y_gridlines()
            .tickSize(-WIDTH)
            .tickFormat("")
        )

}

Мой css:

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}