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

How do you remove the background gridlines in nvd3.js?

提问by amauboussin

I am making a bar graph in nvd3.js, similar to this example: http://nvd3.org/ghpages/discreteBar.html. I was wondering if there was a way to remove the gridline so the background would be plain white. All of the examples use gridlines. I also checked the source code and didn't see anything in the discreteBar model that would make this possible.

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

回答by Tegan Mulholland

.tick {
  opacity: 0;
}

Doesn't work for the vertical lines in the discreteBar chart because they use inline css to set the opacity to 1. But this works:

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

.tick {
  display: none;
}

This will also hide the labels on axes. If you want to remove the lines but keep the labels, use:

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

.tick line {
  display: none;
}

回答by nautat

You can select those grid lines in your CSS and set their opacity 0:

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

.tick {
  opacity: 0;
}

If you still want to see the baseline, you could modify this to:

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

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

Use your browser's inspector tools to see what class the individual elements have that you want to modify and use the power of CSS.

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

回答by Ross R

I founda more specific solution that worked well:

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

(This removes all grids, but you can be selective, ie: .y1.axis)

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

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

回答by bosblaket

To get rid of the guidelines and keep the labels use

摆脱指南并保留标签使用

.tick line {
  opacity: 0;
}

回答by Mohamed NAOUALI

just need to update the css with

只需要更新css

.tick line {
display: none;
}