我正在将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','')的情况下无效。 它是黑色而不是绿色。
这是一个截图,显示该班级已附加到圈子上。
任何帮助,将不胜感激。
谢谢,
黑雁
尝试使用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
})