Ionic 4 D3样式与CSS类

Question

我正在将ionic 3应用程序移植到ionic4。我使用D3创建仪表。

.scss文件中没有任何样式可用于仪表。仪表形状正确，但充满了黑色。

要创建一个更简单的测试版本，我直接使用svg在html中创建一个框。我使用.scss类框填充蓝色。

我还用D3创建了一个圆，并使用style属性用红色填充了圆。

我终于用D3创建了另一个圆，并使用.attr（'class'，''）来填充绿色。

这是html：

<ion-header>
  <ion-toolbar>
    <ion-title>meter</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <svg width="50" height="50">
    <rect x="0" y="0" width="50" height="50" class="box" />
  </svg>


  <div id="cir-1"></div>

  <div id="cir-2"></div>

</ion-content>

代码如下：

const circleOne = d3.select('#cir-1')
  .append('svg')
  .attr('width', 100)
  .attr('height', 100);

circleOne.append('circle')
  .style('stroke', 'gray')
  .style('fill', 'red')
  .attr('r', 40)
  .attr('cx', 50)
  .attr('cy', 50);

const circleTwo = d3.select('#cir-2')
  .append('svg')
  .attr('width', 150)
  .attr('height', 150);

circleTwo.append('circle')
  .attr('class', 'circle-style')
  .attr('r', 40)
  .attr('cx', 100)
  .attr('cy', 100);

这是.scss：

  .circle-style {
    fill: green;
  }

  .box {
    fill: blue;
  }

前两种情况有效，但我使用.attr（'class'，''）的最后一种情况（我试图开始工作）无效。它是黑色而不是绿色。

以下是屏幕截图，显示该班级已附加到圈子上。

任何帮助都将不胜感激。

谢谢

布伦特

Answer 1

尝试使用D3在组件中将ViewEncapsulation设置为None。如果没有Angular，似乎Angular不能很好地与D3配合使用。

导入ViewEncapsulation：

import { ViewEncapsulation } from '@angular/core';

在组件装饰器中将其设置为“无”：

 @Component({
      selector: 'my-chart',
      templateUrl: './my-chart.component.html',
      styleUrls: ['./my-chart.component.scss'],
      encapsulation: ViewEncapsulation.None
 })