title: Styles in component for D3.js do not show in angular 2
body: <p>I am using Angular 2 and D3.js. I want to show a red rectangle.</p>
  
  <p>It only works if I put styles in the <strong>style.css</strong> file.
  Check <a href="http://plnkr.co/edit/GVhAXx1rW9Q8wHJSuvSj?p=preview">this plunkr</a></p>
  
  <p>When I put my styles in the component <strong><code>styles: []</code></strong>, it does not work. Check <a href="http://plnkr.co/edit/uXegLgBJpo2h7v51F3xn?p=preview">this plunkr</a></p>
  
  <p>How to let it work when I use the component <code>styles: []</code>? Thanks</p>
  
  <p><strong>UPDATE:</strong> @micronyks provides a solution, but it makes the styles in the component global, basically no difference with writing in <strong>style.css</strong> file. In <a href="http://plnkr.co/edit/D5EDAC5QvQDWxtcSjLHq?p=preview">this plunkr</a>, it shows style in one component will override another component's styles, so cannot show green and red rectangles.</p>
  
  <p><strong>UPDATE 2:</strong> @Günter's way perfectly solve this problem!! Just a remind, for Günter's way: it needs at least Angular beta 10. (My other plunkrs use Angular beta 8) The working demo for green and one red rectangle using Angular beta 12 is <a href="http://plnkr.co/edit/qxvODQmklhNpdhaoP8UI?p=preview">here</a>.</p>
  
  <pre><code>import {Component} from 'angular2/core'
  @Component({
    selector: 'my-app',
    providers: [],
     styles: [`
      /*this does not work*/
      .bar {
        fill: red;
      }
    `],
    template: `
      &lt;div&gt;
        &lt;svg class="chart"&gt;&lt;/svg&gt;
      &lt;/div&gt;
    `,
    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());
    }
  }
  </code></pre>