更改nvd3中的第一条垂直网格线 [英] Alter first vertical grid line in nvd3

问题描述

我想删除(或有效隐藏)nvd3图表的网格中的第一条垂直线.我认为这是我的图表存在的问题，但是经过测试之后，我意识到这似乎是一个更普遍的问题.

I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.

我通过运行以下行对其进行了测试:

I tested it by running the line:

d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')

在控制台中，在最简单的折线图中，我可以找到: http://nvd3.org/examples/line.html ，但仍然无法正常运行！它会更改除第一行垂直线以外的所有行.我感到困惑，我尝试了笔触，填充，不透明度等类别的每种组合-我可以影响整个svg(不透明度)，或者什么都不影响.有人有什么想法吗?

in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?

我本来应该指定此名称，对不起-我不想完全删除Y轴.我仍然需要标签和刻度线-我只想删除一条垂直线(或至少使其变浅-它比图表的其余部分暗得多).

I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).

推荐答案

根据您的评论进行操作: 您不想看到"nvd3图表的网格中的第一条垂直线" 哪个是y轴: 有两种方法可以实现: 选项1

Going by your comments: You don't want to see the " the first vertical line in the grid for an nvd3 chart" Which is the y axis: Two ways to achieve that: Option1

var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(false)        //hide the y-axis
                .showXAxis(true);        //Show the x-axis

选项2: 因为在您的示例中，您要使用CSS选项

Option2: Since in your example you are going for a CSS option

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

我会选择Option1

I will prefer Option1

编辑发表您的说明，您希望使y轴光可用:

EDIT post your clarification, you wish to make the y axis line light you can use:

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

或者如果您想完全隐藏它

or if you want to hide it completely

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

这篇关于更改nvd3中的第一条垂直网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！