如何隐藏nvd3图上第一Y轴行？ [英] How to hide first Y Axis line on an nvd3 chart?

问题描述

Plnkr例如：
http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=$p$pview

这是我的应用程序截图：

我试过修改CSS，但我只能去除第二（右Y轴线），但不是第一个左Y轴线。

我已经试过：

  .NV-Y {
    显示：无;
}
 

以及所有从这个答案行：改变第一垂直网格线在nvd3

  d3.selectAll（'NV-Y'）。ATTR（'显示器'，'无'）d3.selectAll（'NV-Y路径）。ATTR（'不透明'，'0.1'）d3.selectAll（'NV-Y路径）。ATTR（'显示器'，'无'）
 

我目前drawChart功能：

 函数drawChart（RES）{
    的console.log（''）;
    的console.log（'drawChart解析度='，RES）;
    nv.addGraph（函数（）{
        VAR图= nv.models.linePlusBarChart（）
            .margin（{顶：30，右：40，底部：50，左：40}）
            .X（功能（D，I）{返回I}）
            .Y（函数（D）{返回D [1]}）
            。颜色（d3.scale.category10（）范围（））;        chart.xAxis.tickFormat（函数（D）{
            变种DX = RES [0] .values​​ [D]。＆放大器;＆安培;水库[0] .values​​并[d] [0] || 0;
            返回d3.time.format（％X'）（新日期（DX））
        }）;        chart.y1Axis
            .tickFormat（d3.format（'F'））;        chart.y2Axis
            .tickFormat（函数（D）{返回'$'+ d3.format（'F'）（D）}）;        chart.bars.forceY（[0]）;
        // http://stackoverflow.com/questions/23754188/nvd3-js-how-to-disable-tooltips-for-one-serie-only
        chart.lines.interactive（假）;
        // http://nvd3-community.github.io/nvd3/examples/documentation.html#line
        chart.height（280）;
        //如果没有图表数据是avaliable展示：
        chart.noData（没有数据显示的时刻。）;        //删除的传说：
        chart.showLegend（假）;        d3.select（'＃图SVG）
            .datum（RES）
            .transition（）。持续时间（500）
            .CALL（图）        d3.selectAll（'NV-Y路径）ATTR（'显示器'，'无'）。        nv.utils.windowResize（chart.update）;        返回图;
    }）;
}
 

解决方案

如果你想隐藏第一Y轴做的：

  .NV-Y1 {
  显示：无;
}
 

如果你要隐藏的第二个y轴的做的事：

  .NV-Y2 {
  显示：无;
}
 

http://plnkr.co/edit/IgFh1rV4a6ubAMe0VqT2?p=$p$ PVIEW

Plnkr example: http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview

Screenshot from my app:

I've tried modifying the CSS, however I was only able to remove the 2nd (right Y axis line), but not the first left Y axis line.

What I've tried:

.nv-y { 
    display: none;
}

As well as all the lines from this answer: Alter first vertical grid line in nvd3

d3.selectAll('.nv-y').attr('display','none')

d3.selectAll('.nv-y path').attr('opacity','0.1')

d3.selectAll('.nv-y path').attr('display','none')

My current drawChart function:

function drawChart(res) {
    console.log(' ');
    console.log('drawChart res = ',res);
    nv.addGraph(function() {
        var chart = nv.models.linePlusBarChart()
            .margin({top: 30, right: 40, bottom: 50, left: 40})
            .x(function(d,i) { return i })
            .y(function(d) { return d[1] })
            .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = res[0].values[d] && res[0].values[d][0] || 0;
            return d3.time.format('%x')(new Date(dx))
        });

        chart.y1Axis
            .tickFormat(d3.format(',f'));

        chart.y2Axis
            .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

        chart.bars.forceY([0]);
        // http://stackoverflow.com/questions/23754188/nvd3-js-how-to-disable-tooltips-for-one-serie-only
        chart.lines.interactive(false);
        // http://nvd3-community.github.io/nvd3/examples/documentation.html#line
        chart.height(280);
        // If not chart data is avaliable to display:
        chart.noData("There is no Data to display at the moment.");

        // Remove legend:
        chart.showLegend(false);

        d3.select('#chart svg')
            .datum(res)
            .transition().duration(500)
            .call(chart);

        d3.selectAll('.nv-y path').attr('display','none');

        nv.utils.windowResize(chart.update);

        return chart;
    });
}

解决方案

if you want to hide the 1st y axis do:

.nv-y1{
  display:none;
}

if you want to hide the 2nd y axis do:

.nv-y2{
  display:none;
}

http://plnkr.co/edit/IgFh1rV4a6ubAMe0VqT2?p=preview

这篇关于如何隐藏nvd3图上第一Y轴行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！