如何删除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的强大功能.