Closed
Description
I am using Angular 2.0.0-beta.12 & D3, i am injecting D3 barchart after viewInit, and inject css in component by adding attribute "styles", element injected and display on browser, but css is not apply on dynamic elements which are created by D3, found an issue, after component initialization css embed in document head tag, and all css selectors changed to .myClass[_ngcontent-[variable]], and this variable attribute attached to all elements of that component, but not with dynamically appended components.
here are my code
@Component({
selector: 'app',
template: `
<h1>D3.js Integrated if background is yellow</h1>
style apply on this static element but not dynamic element
<svg><rect class="bar" width="200" height="200"></rect></svg>
`,
styles : [`.bar { fill: steelblue; } .bar:hover { fill: brown; }
` ]
})
class App {
constructor(public elementRef: ElementRef){
}
ngOnInit(){
var componentContainer = d3.select(this.elementRef.nativeElement);
componentContainer.select("h1").style("background-color", "yellow");
//Dynamic Element Injeciton
componentContainer.append("svg")
.append("rect")
.attr("class", "bar")
.attr("width", 200)
.attr("height", 200);
}
}