Ich verwende Angular 2 und D3.js. Ich möchte ein rotes Rechteck anzeigen.
Es funktioniert nur, wenn ich Stile in die Datei style.css einfüge . Überprüfen Sie dieses Plunkr
Wenn ich meine Stile in die Komponente styles: []
lege, funktioniert es nicht. Überprüfen Sie dieses Plunkr
Siehe Stapelüberlauf .
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());
}
}
Das ist beabsichtigt. Angular fügt für Komponenten eindeutige Klassennamen hinzu und schreibt die hinzugefügten Stile so um, dass sie nur auf die Komponenten angewendet werden, denen sie hinzugefügt wurden.
D3 generiert HTML dynamisch ohne Angulars-Kenntnisse und Angular kann die Klassen nicht anwenden, damit die Stile auf das generierte HTML angewendet werden.
Wenn Sie die Stile in der HTML-Datei des Einstiegspunkts hinzufügen, schreibt Angular die Stile auch nicht neu und die hinzugefügten Hilfsklassen werden nicht wirksam.
Bei encapsulation: ViewEncapsulation.None
führt Angular dieses Umschreiben nicht durch, daher ähnelt das Ergebnis dem Hinzufügen von HTML zu index.html
.
Alternativ können Sie die kürzlich eingeführten Shadow-Piercing-CSS-Kombinatoren >>>
, /deep/
und ::shadow
verwenden. Siehe auch http://stackoverflow.com/a/36225709/217408
@zoechi vielen Dank!! Es funktioniert einwandfrei!
Weitere Informationen zu @zoechis Lösung für andere Personen finden Sie hier
Dieses Problem wurde aufgrund von Inaktivität automatisch gesperrt.
Bitte reichen Sie ein neues Problem ein, wenn Sie auf ein ähnliches oder verwandtes Problem stoßen.
Lesen Sie mehr über unsere Richtlinie zum automatischen Sperren von Konversationen .
_Diese Aktion wurde automatisch von einem Bot ausgeführt._
Hilfreichster Kommentar
Das ist beabsichtigt. Angular fügt für Komponenten eindeutige Klassennamen hinzu und schreibt die hinzugefügten Stile so um, dass sie nur auf die Komponenten angewendet werden, denen sie hinzugefügt wurden.
D3 generiert HTML dynamisch ohne Angulars-Kenntnisse und Angular kann die Klassen nicht anwenden, damit die Stile auf das generierte HTML angewendet werden.
Wenn Sie die Stile in der HTML-Datei des Einstiegspunkts hinzufügen, schreibt Angular die Stile auch nicht neu und die hinzugefügten Hilfsklassen werden nicht wirksam.
Bei
encapsulation: ViewEncapsulation.None
führt Angular dieses Umschreiben nicht durch, daher ähnelt das Ergebnis dem Hinzufügen von HTML zuindex.html
.Alternativ können Sie die kürzlich eingeführten Shadow-Piercing-CSS-Kombinatoren
>>>
,/deep/
und::shadow
verwenden. Siehe auch http://stackoverflow.com/a/36225709/217408