We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I am using Angular 2 and D3.js. I want to show a red rectangle.
It only works if I put styles in the style.css file. Check this plunkr
When I put my styles in the component styles: [], it does not work. Check this plunkr
styles: []
Refer to Stack Overflow.
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()); } }
The text was updated successfully, but these errors were encountered:
That's by design. Angular adds class names unique to components and rewrites the added styles to only apply to the components where they were added.
D3 generates HTML dynamically without Angulars knowledge and Angular can't apply the classes to make the styles apply on the generated HTML.
If you add the styles at the entry point HTML file, Angular also doesn't rewrite the styles and the added helper classes don't take effect.
With encapsulation: ViewEncapsulation.None Angular doesn't do this rewriting, therefore the result is similar to adding the HTML to the index.html.
encapsulation: ViewEncapsulation.None
index.html
Alternatively you can use the recently introduced shadow piercing CSS combinators >>>, /deep/ and ::shadow. See also http://stackoverflow.com/a/36225709/217408
>>>
/deep/
::shadow
Sorry, something went wrong.
@zoechi thank you so much!! It is working perfectly!
For other people, for more details about @zoechi's solution , please check here
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
No branches or pull requests
I am using Angular 2 and D3.js. I want to show a red rectangle.
It only works if I put styles in the style.css file. Check this plunkr
When I put my styles in the component
styles: []
, it does not work. Check this plunkrRefer to Stack Overflow.
The text was updated successfully, but these errors were encountered: