如何让NVD3图表的刻度线仅显示在轴线上？

我使用NVD3构建的图表中，刻度线以网格线形式贯穿整个绘图区域，希望修改为仅在轴线上显示刻度线。

当前图表效果：

期望效果：

可运行示例代码 #

JavaScript代码 #

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 80,
                    left: 55
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                xAxis: {
                    axisLabel: 'Timeline',
                    tickFormat: function(d) {
                        return d3.time.format('%B %d')(new Date(d))
                    },
                    ticks: 6,
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Molecular density (kg/m^3)',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -10,
                    showMaxMin: false
                }
            }
        };

        $scope.data = [{"key":"K7 molecules","values":[{"x":1435708800000,"y":8},{"x":1435795200000,"y":9},{"x":1435881600000,"y":8},{"x":1435968000000,"y":8},{"x":1436054400000,"y":9},{"x":1436140800000,"y":9},{"x":1436227200000,"y":8},{"x":1436313600000,"y":8},{"x":1436400000000,"y":9},{"x":1436486400000,"y":9},{"x":1436572800000,"y":7},{"x":1436659200000,"y":8}],"area":true,"color":"#0CB3EE"},{"key":"N41 type C molecules","values":[{"x":1435708800000,"y":8},{"x":1435795200000,"y":7},{"x":1435881600000,"y":8},{"x":1435968000000,"y":9},{"x":1436054400000,"y":7},{"x":1436140800000,"y":9},{"x":1436227200000,"y":8},{"x":1436313600000,"y":9},{"x":1436400000000,"y":9},{"x":1436486400000,"y":9},{"x":1436572800000,"y":9},{"x":1436659200000,"y":8}],"area":true,"color":"#383838"}];
});

HTML代码 #

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.1/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    
  </body>

</html>

解决方案 #

方法一：通过NVD3配置参数修改 #

NVD3的坐标轴配置中，tickSize参数控制刻度线长度：默认值为-1时会生成贯穿绘图区域的网格线；设置为0或正数时，刻度线仅显示在轴线上。

修改后的配置代码如下，在xAxis和yAxis中添加tickSize参数：

$scope.options = {
    chart: {
        type: 'lineChart',
        height: 450,
        margin : {
            top: 20,
            right: 20,
            bottom: 80,
            left: 55
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        useInteractiveGuideline: true,
        xAxis: {
            axisLabel: 'Timeline',
            tickFormat: function(d) {
                return d3.time.format('%B %d')(new Date(d))
            },
            ticks: 6,
            showMaxMin: false,
            tickSize: 0 // 刻度线仅显示在轴线上
        },
        yAxis: {
            axisLabel: 'Molecular density (kg/m^3)',
            tickFormat: function(d){
                return d3.format('.02f')(d);
            },
            axisLabelDistance: -10,
            showMaxMin: false,
            tickSize: 0 // 同上处理Y轴
        }
    }
};

若希望轴线上的刻度线有轻微突出，可将tickSize设为正数（如tickSize:5），自定义刻度线长度。

方法二：CSS样式覆盖 #

如果配置参数无法生效，可通过CSS隐藏网格线，仅保留轴线：

/* 隐藏X轴网格线 */
.nvd3 .nv-x .nv-axis line {
    display: none;
}
/* 隐藏Y轴网格线 */
.nvd3 .nv-y .nv-axis line {
    display: none;
}
/* 确保轴线正常显示 */
.nvd3 .nv-axis path {
    stroke: #333;
    stroke-width: 1;
}

内容的提问来源于stack exchange，提问作者Vada Poche