解决d3.js在angular中添加class样式不生效问题

• 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"
            ],