Gli stili nel componente per D3.js non vengono visualizzati in Angular 2

Sto usando Angular 2 e D3.js. Voglio mostrare un rettangolo rosso.

Funziona solo se inserisco gli stili nel file style.css . Controlla questo plunkr

Quando inserisco i miei stili negli stili dei componenti styles: [] , non funziona. Controlla questo plunkr

Come farlo funzionare quando utilizzo gli styles: [] del componente styles: [] ? Grazie

AGGIORNAMENTO: @micronyks fornisce una soluzione, ma rende globali gli stili nel componente, praticamente nessuna differenza con la scrittura nel file style.css . In questo plunkr , mostra lo stile in un componente sovrascrive gli stili di un altro componente, quindi non può mostrare rettangoli verdi e rossi.

AGGIORNAMENTO 2: @ modo di Günter risolve perfettamente questo problema !! Solo un richiamo, per Günter: ha bisogno almeno della beta angular 10. (I miei altri plunkrs usano la beta angular 8) La demo di lavoro per il rettangolo verde e un rettangolo rosso usando la beta angular 12 è qui .

 import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], styles: [` /*this does not work*/ .bar { fill: red; } `], template: ` 
`, 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()); } }