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

【问题标题】：How to add vertical grid line to my d3 chart如何在我的 d3 图表中添加垂直网格线
【发布时间】：2017-12-05 15:58:13
【问题描述】：

我想知道我做错了什么。我遵循了一些关于在 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;
}

【问题讨论】：

标签： javascript css d3.js gridlines

【解决方案1】：

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

【讨论】：