CSS не применяется к линейной диаграмме

Question

Я пытаюсь скрыть ось на моем графике строк.Точно так же, как эта проблема Скрыть ось диаграммы dc.js по оси X .Но я не мог изменить стиль независимо от того, что я делаю.

Когда я попытался использовать #your-row-chart svg g g.axis.x { display: none; }, но это не применимо к моему графику.

Это мой css
div.dc-chart.sampleId.scrolled-row-chart svg g g.axis { display: none; } Не уверен, в чем моя ошибка.Он прекрасно работает до div.dc-chart.sampleId.scrolled-row-chart, что меняет стиль моей строки.

Ниже приведен ожидаемый результат.Я удаляю стили, вручную редактируя CSS на Chrome.Я даже копирую селектор HTML в css, чтобы убедиться, что указываю на правильный элемент, но он все равно не работает.

Answer 1

Попробуйте добавить префикс :: ng-deep в ваш css

Answer 2

Извиняюсь за публикацию ответа на дубликат вопроса.Я знаю, что это против правил сайта, но я думаю, что это помогает людям в поиске в Google, и я пытаюсь бороться с FUD «Я нашел ответ, но он не работал для меня».

Как прокомментировали другиетрудно проверить без работающего примера.Поэтому я начал с базового примера линейной диаграммы .

. Я попытался добавить CSS

.dc-chart#test svg g g.axis { display: none; }

, и он работал нормально.Возможно, ваш CSS-селектор слишком специфичен!

Я также пытался

chart.margins({left: 0, top: 0, right: 0, bottom: 0});

, и это тоже сработало!

Снимок экрана без оси, просто чтобы сделать мой печальный повторяющийся ответДальше интереснее:

Answer 3

Вы пытались редактировать SVG напрямую?Если это невозможно, проверьте, находятся ли ваши стили на более высоком слое, чем те, которые вы хотите переопределить (http://qnimate.com/dive-into-css-specificity/)