如何在我的d3图表中添加垂直网格线

Question

我想知道我在做什么错。 我已经按照一些教程（ 在d3js v4中使用 Vertical grid Simple gridlines ）来在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;
}

Answer 1

如果我在您的CSS中没有记错，您的.grid path{stroke-width:0;}应该读为.grid path{stroke-width:0.5;} 0.5可以是您想要的任何数字。 笔划宽度为0会有效删除线条。