Alter first vertical grid line in 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')

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?

EDIT:

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).

回答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

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

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

I will prefer Option1

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')

回答2:

One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.

Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.

来源：https://stackoverflow.com/questions/32750158/alter-first-vertical-grid-line-in-nvd3