-
1、背景
在ng-alain中使用d3.js绘制曲线图,想改变坐标轴的样式。
通过.attr('class', 'd3-line-axis')的形式添加样式来覆盖d3.js默认的样式,但是一直不生效。
-
2、原因
.ts文件中3种添加样式的方式
1)template种直接<style></style>
2)通过styles: []
3)通过styleUrls: []导入
这3种方式都试过了,编译的时候会带上[_ngcontent-c17],导致通过.attr添加的样式不匹配
编译前:
.d3-line-axis path, .d3-line-axis line{ stroke: blue; } .d3-line-axis text{ font-family: sans-serif; font-size: 12px; fill: red; }
编译后:
.d3-line-axis[_ngcontent-c10] path[_ngcontent-c10], .d3-line-axis[_ngcontent-c10] line[_ngcontent-c10]{ stroke: blue; } .d3-line-axis[_ngcontent-c10] text[_ngcontent-c10]{ font-family: sans-serif; font-size: 12px; fill: red; }
-
3、解决思路
1)在index.html中直接把样式加上
<style type="text/css"> .d3-line-axis path, .d3-line-axis line{ stroke: blue; } .d3-line-axis text{ font-family: sans-serif; font-size: 12px; fill: red; } </style>
2)新建个css文件,在angular.json中添加
"styles": [ "node_modules/simple-line-icons/css/simple-line-icons.css", "src/styles.less", "src/app/shared/json-schema/widgets/charts/d3.chart.css" ],