Ionic 4 D3样式与CSS类

问题描述 投票:0回答:1

我正在将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','')的情况下无效。 它是黑色而不是绿色。

这是一个截图,显示该班级已附加到圈子上。

在此处输入图片说明

任何帮助,将不胜感激。

谢谢,

黑雁

javascript css typescript d3.js ionic4
1个回答
1
投票

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

导入ViewEncapsulation:

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

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

 @Component({
      selector: 'my-chart',
      templateUrl: './my-chart.component.html',
      styleUrls: ['./my-chart.component.scss'],
      encapsulation: ViewEncapsulation.None
 })
© www.soinside.com 2019 - 2024. All rights reserved.