Ionic 4 D3 样式与 scss class

Question

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

我的 .scss 文件中的

None 样式与仪表一起使用。仪表形状正确但填充黑色。

为了创建一个更简单的测试演员表，我直接在 html 中用 svg 创建了一个盒子。我使用 .scss class 框来填充蓝色。

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

我终于用 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', '') 的最后一种情况（我正在尝试开始工作）无效。它是黑色而不是绿色。

这是显示 class 附加到圆圈的屏幕截图。

非常感谢任何帮助。

谢谢，

布伦特

Answer 1

尝试使用 D3 在您的组件中将 ViewEncapsulation 设置为 None。好像 Angular 没有它就不能很好地玩 D3。

导入视图封装：

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

在组件装饰器中将其设置为 None：

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

Ionic 4 D3 样式与 scss class

Ionic 4 D3 styling with scss class

javascript

css

d3.js

typescript

ionic4