如何删除 nvd3.js 中的背景网格线？

Posted 2023-02-22

【中文标题】如何删除 nvd3.js 中的背景网格线？

【英文标题】：How do you remove the background gridlines in nvd3.js?

【发布时间】：2013-01-06 07:54:13

【问题描述】：

我正在 nvd3.js 中制作条形图，类似于此示例：http://nvd3.org/ghpages/discreteBar.html。我想知道是否有办法删除网格线，这样背景就会变成纯白色。所有示例都使用网格线。我还检查了源代码，并没有在discreteBar 模型中看到任何使这成为可能的东西。

【参考方案1】：

.tick 
  opacity: 0;

不适用于离散条形图中的垂直线，因为它们使用内联 css 将不透明度设置为 1。但这有效：

.tick 
  display: none;

这也会隐藏坐标轴上的标签。如果要删除线条但保留标签，请使用：

.tick line 
  display: none;

【参考方案2】：

您可以在 CSS 中选择这些网格线并将其不透明度设置为 0：

.tick 
  opacity: 0;

如果您仍想查看基线，可以将其修改为：

.tick:not(.zero) 
  opacity: 0;

使用浏览器的检查器工具查看您想要修改的各个元素的类，并使用 CSS 的强大功能。

【讨论】：

目前的 nvd3.js 似乎使用内联样式属性来添加刻度线（至少在使用离散条形图时），因此 CSS 在这种情况下不起作用，因为内联 style="opactity: 1"优先。

您可能希望使用opacity: 0 !important;覆盖内联样式

【参考方案3】：

我found 一个更具体的解决方案，效果很好：

（这会删除所有网格，但您可以有选择性，即：.y1.axis）

.nvd3.multiChart .axis .nv-axis line 
stroke: none;
fill: none;

【讨论】：

不确定这是否在 nvD3 中发生了变化，但我不得不使用这个：.nv-y1 .tick line stroke: none;填写：无；

【参考方案4】：

摆脱指南并保留标签使用

.tick line 
  opacity: 0;

【参考方案5】：

只需要更新css

.tick line 
display: none;