解決d3.js在angular中新增class樣式不生效問題
阿新 • • 發佈:2019-02-17
-
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" ],