Angular: D3.js के लिए घटक में शैलियाँ कोणीय 2 में प्रदर्शित नहीं होती हैं

मैं कोणीय 2 और D3.js का उपयोग कर रहा हूँ। मैं एक लाल आयत दिखाना चाहता हूँ।

यह तभी काम करता है जब मैं स्टाइल को स्टाइल.सीएसएस फाइल में डालता हूं। इस प्लंकर की जाँच करें

जब मैं अपनी शैलियों को घटक styles: [] में डालता हूं, तो यह काम नहीं करता है। इस प्लंकर की जाँच करें

स्टैक ओवरफ़्लो का संदर्भ लें।

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());
  }
}