更改 nvd3 中的第一条垂直网格线

Question

我想删除（或有效隐藏）nvd3 图表网格中的第一条垂直线。本来以为是我的图表有问题，后来测试了一下，才发现好像是比较普遍的问题

我通过运行行进行了测试：

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

在控制台中，在我能找到的最简单的折线图中：http://nvd3.org/examples/line.html 但它仍然不起作用！它更改所有行除了第一条垂直线。我很困惑，我已经尝试了类与描边、填充、不透明度等的所有组合 - 我可以影响整个 svg（不透明度），或者什么都不影响。有人有什么想法吗？

编辑：

我本来应该指定这个的，抱歉 - 我不想完全删除 Y 轴。我仍然需要标签和刻度线 - 我只想删除那条垂直线（或至少减轻它 - 它比我图表的其余部分暗得多）。

Answer 1

一种解决方案是指定要用于每个轴的刻度值数组。使用 axis.tickValues([values]) 显式声明您希望图表使用哪个 XAxis 刻度。因此，您可以将 .tickValues([1, 2, 3, 5, 8, 13, 21]); 弹出到 chart.xAxis 或 chart.yAxis 中，并且刻度只会出现在数组中的相应值中。在你的情况下，你会想把它放在 chart.xAxis 变量中。但是，如果您想要一个动态图表，一旦图表中的数据更新，显式声明刻度值就会出现问题。另一方面，如果您使用的是静态数据，则这是一个非常简单的修复方法。我已经在他们的实时代码编辑器中测试了这个解决方案，它似乎可以解决问题。

请参阅 https://github.com/mbostock/d3/wiki/SVG-Axes#ticks 以了解其他可能有用的指令。

Answer 2

根据您的评论：您不想看到 " nvd3 图表网格中的第一条垂直线" 哪个是y轴：实现这一目标的两种方法：选项1

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 选项

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

我更喜欢选项 1

编辑 post 你的澄清，你想使 y 轴线光你可以使用：

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

或者如果你想完全隐藏它

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

更改 nvd3 中的第一条垂直网格线

Alter first vertical grid line in nvd3

javascript

d3.js

nvd3.js