我正在使用 Angular 2 和 D3.js。 我想显示一个红色矩形。
仅当我将样式放入style.css文件时才有效。 检查这个 plunkr
当我将样式放入组件styles: []
时,它不起作用。 检查这个 plunkr
请参阅堆栈溢出。
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
styles: [`
/*this does not work*/
.bar {
fill: red;
}
`],
template: `
<div>
<svg class="chart"></svg>
</div>
`,
directives: []
})
export class App {
constructor() {}
ngOnInit() {
this.draw();
}
draw() {
let data = [{name: 'A', value: 1}];
let width = 400, height = 200;
let x = d3.scale.ordinal().rangeRoundBands([0, width]);
let y = d3.scale.linear().range([height, 0]);
let chart = d3.select(".chart")
.attr("width", width)
.attr("height", height)
.append("g");
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", x.rangeBand());
}
}
这是设计使然。 Angular 添加了组件独有的类名,并将添加的样式重写为仅适用于添加它们的组件。
D3 在没有 Angulars 知识的情况下动态生成 HTML,并且 Angular 无法应用这些类来使样式应用于生成的 HTML。
如果您在入口点 HTML 文件中添加样式,Angular 也不会重写样式并且添加的辅助类不会生效。
使用encapsulation: ViewEncapsulation.None
Angular 不会进行这种重写,因此结果类似于将 HTML 添加到index.html
。
或者,您可以使用最近引入的阴影穿孔 CSS 组合>>>
、 /deep/
和::shadow
。 另见http://stackoverflow.com/a/36225709/217408
@zoechi 非常感谢! 它运行良好!
对于其他人,有关@zoechi解决方案的更多详细信息,请查看此处
最有用的评论
这是设计使然。 Angular 添加了组件独有的类名,并将添加的样式重写为仅适用于添加它们的组件。
D3 在没有 Angulars 知识的情况下动态生成 HTML,并且 Angular 无法应用这些类来使样式应用于生成的 HTML。
如果您在入口点 HTML 文件中添加样式,Angular 也不会重写样式并且添加的辅助类不会生效。
使用
encapsulation: ViewEncapsulation.None
Angular 不会进行这种重写,因此结果类似于将 HTML 添加到index.html
。或者,您可以使用最近引入的阴影穿孔 CSS 组合
>>>
、/deep/
和::shadow
。 另见http://stackoverflow.com/a/36225709/217408