CSS不适用于Angular 2应用程序中的C3.js图表

Question

我在Angular 2应用程序中实现了一个C3.js图表，但是C3.css文件中的样式没有应用到它。我知道它正在加载(我把它复制到我的组件的scss文件中)，但仍然不能工作。是因为图表是在css之后加载的吗？有人知道怎么解决这个问题吗？

我在ngOnInit中异步获取图表的数据，因此我认为在绘制图表之前应用css (这发生在接收数据时)。我也在想，这可能是因为Angular抛出了选择器。

ngOnInit() {
    // draw pie chart
    this.bitcoinService.getMapData()
        .subscribe(data => {
            var pieChartData = this.formatPieChartData(data);
            this.pieChartInit(pieChartData);  // call this.pieChartInit
        })
}


pieChartInit(data) {
  var chart = c3.generate({
      data: {
          columns: data, // example: [['data1', 30], ['data2', 120]]
          type: 'pie'
      }
});

我将C3 css直接复制到我的scs中，如下所示，它适用于我的组件中的其他所有内容：

@Component({
  moduleId: module.id,
  selector: 'bitcoin-dashboard',
  styles: [require('./bitcoin-dashboard.component.scss')],
  template: require('./bitcoin-dashboard.component.html')
})

此外，在调用pieChartInit之后，当我d3.select图表的一个元素时，样式可以正常工作。示例：

d3.selectAll('.c3-chart-arc path').style('stroke', 'white')

任何帮助都是非常感谢的！

Answer 1

CSS何时加载无关紧要。一旦它被加载，它就被应用。可能是css名称空间在起作用，并阻止浏览器匹配来自C3 CSS的类。加载完所有内容后，检查Chrome中的dom和类。

Answer 2

由非角度代码添加的HTML不会添加样式封装属性，因此不会应用样式。您可以使用/deep/ (以及别名>>>，但它不适用于SASS )来解决问题：

:host /deep/ .c3-chart-arc path {
  stroke: white;
}

另请参阅

• Load external css style into Angular 2 Component
• Styles in component for D3.js do not show in angular 2