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

Question

我在nvd3.js中制作条形图，类似于此示例：http://nvd3.org/ghpages/discreteBar.html。我想知道是否有办法删除网格线，因此背景将是纯白色。所有示例都使用网格线。我还检查了源代码，并且没有在discreteBar模型中看到任何可以实现此功能的内容。

Answer 1

.tick {
  opacity: 0;
}

对于discreteBar图表中的垂直线不起作用，因为它们使用内联css将不透明度设置为1.但这样可行：

.tick {
  display: none;
}

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

.tick line {
  display: none;
}

Answer 2

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

.tick {
  opacity: 0;
}

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

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

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

Answer 3

I found更具体的解决方案效果很好：

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

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

Answer 4

要删除指南并保持标签使用

.tick line {
  opacity: 0;
}

Answer 5

只需要用

更新css

.tick line {
display: none;
}