javascript - 如何将垂直网格线添加到我的 d3 图表

Question

我想知道我做错了什么。我遵循了一些关于在 3DJS V4 中制作网格线的教程 ( Vertical grid Simple gridlines in d3js 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 会有效地删除线条。