如何在nvd3.js中移除背景网格线？

Question

我正在使用nvd3.js制作一张柱状图，类似于这个示例：http://nvd3.org/ghpages/discreteBar.html。我想知道是否有一种方法可以去除网格线，使背景变成纯白色。所有的示例都使用网格线。我还查看了源代码，没有在离散条形图模型中找到任何可以实现这一点的东西。

- amauboussin

Answer 1

.tick {
  opacity: 0;
}

无法针对离散条形图中的垂直线工作，因为它们使用内联CSS将不透明度设置为1。但是，以下方法可以解决：

.tick {
  display: none;
}

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

.tick line {
  display: none;
}

- Tegan Mulholland

Answer 2

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

.tick {
  opacity: 0;
}

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

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

使用浏览器的检查工具查看您要修改的个别元素所具有的类，并利用CSS的威力。

- nautat

---

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

您可以使用 opacity: 0 !important; 覆盖内联样式。 - linqu

Answer 3

我找到了一个更具体的解决方案，效果很好:

(这将删除所有网格，但您可以选择性地进行操作，例如：.y1.axis)

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

- Ross R

---

不确定在nvD3中是否有所改变，但我必须使用以下内容：.nv-y1 .tick line { stroke: none; fill: none; } - CMerrill

Answer 4

为了去掉指导线并保留标签，请使用以下代码：

.tick line {
  opacity: 0;
}

- bosblaket

Answer 5

只需要更新CSS即可

.tick line {
display: none;
}

- Mohamed NAOUALI