Как удалить фоновые линии сетки в nvd3.Яш?

Я делаю гистограмму в nvd3.js, подобно этому примеру:http://nvd3.org/ghpages/discreteBar.html. Мне было интересно, есть ли способ удалить линию сетки, чтобы фон был простым белым. Во всех примерах используются линии сетки. Я также проверил исходный код и не увидел ничего в модели discreteBar, что сделало бы это возможным.

5 ответов


вы можете выбрать эти линии сетки в CSS и установить их непрозрачность 0:

.tick {
  opacity: 0;
}

Если вы все еще хотите увидеть базовую линию, вы можете изменить это на:

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

используйте инструменты инспектора вашего браузера, чтобы увидеть, какой класс отдельных элементов вы хотите изменить и использовать силу CSS.


.tick {
  opacity: 0;
}

не работает для вертикальных линий в дискретной диаграмме, потому что они используют встроенный css для установки непрозрачности 1. Но это работает:

.tick {
  display: none;
}

Это также скроет метки на осях. Если вы хотите удалить строки, но сохранить метки, используйте:

.tick line {
  display: none;
}

Я нашел более конкретное решение, которое хорошо работало:

(это удаляет все сетки, но вы можете быть выборочными, т. е.: .У1.axis)

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

чтобы избавиться от рекомендаций и сохранить метки, используйте

.tick line {
  opacity: 0;
}

просто нужно обновить css с

.tick line {
display: none;
}