CSS 未应用于折线图

Question

我试图隐藏我的行图表上的轴。就像这个问题Hide dc.js chart x-axis。但是怎么修改样式都改不了

当我尝试使用 #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 修改了我的行图表的样式。

以下是预期结果。我通过在 Chrome 上手动编辑 css 来删除样式。我什至将 HTML 选择器复制到 css 以确保我指向正确的元素，但它仍然不起作用。

Answer 1

您是否尝试过直接编辑 SVG？如果不可能，请检查您的样式是否位于比您要覆盖的样式更高的层上 (http://qnimate.com/dive-into-css-specificity/)

Answer 2

尝试在 css

中添加 ::ng-deep 前缀

Answer 3

很抱歉发布重复问题的答案。我知道这违反网站规则，但我认为它有助于人们的 google 搜索，我正在努力与 "I found an answer but it didn't work for me".

的 FUD 作斗争

正如其他人评论的那样，没有运行示例很难进行测试。所以我从 the basic row chart example.

开始

我尝试添加 CSS

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

而且效果很好。也许您的 CSS 选择器太具体了！

我也试过了

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

这也有效！

没有轴的屏幕截图，只是为了让我悲伤的重复答案更有趣：

CSS 未应用于折线图

CSS is not applied to row chart

css

dc.js

angular