Estou usando Angular 2 e D3.js. Eu quero mostrar um retângulo vermelho.
Só funciona se eu colocar estilos no arquivo style.css . Verifique este plunkr
Quando coloco meus estilos no componente styles: []
, não funciona. Verifique este plunkr
Consulte 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());
}
}
Isso é por design. Angular adiciona nomes de classe exclusivos aos componentes e reescreve os estilos adicionados para aplicar apenas aos componentes onde foram adicionados.
D3 gera HTML dinamicamente sem conhecimento de Angulars e Angular não pode aplicar as classes para fazer com que os estilos se apliquem no HTML gerado.
Se você adicionar os estilos no arquivo HTML do ponto de entrada, o Angular também não reescreverá os estilos e as classes auxiliares adicionadas não terão efeito.
Com encapsulation: ViewEncapsulation.None
o Angular não faz essa reescrita, portanto, o resultado é semelhante a adicionar o HTML ao index.html
.
Alternativamente, você pode usar os combinadores CSS de perfuração de sombra recentemente introduzidos >>>
, /deep/
e ::shadow
. Consulte também http://stackoverflow.com/a/36225709/217408
@zoechi muito obrigada!! Está funcionando perfeitamente!
Para outras pessoas, para mais detalhes sobre a solução de @zoechi , por favor verifique aqui
Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se encontrar um problema semelhante ou relacionado.
Leia mais sobre nossa política de bloqueio automático de conversas .
_Esta ação foi realizada automaticamente por um bot._
Comentários muito úteis
Isso é por design. Angular adiciona nomes de classe exclusivos aos componentes e reescreve os estilos adicionados para aplicar apenas aos componentes onde foram adicionados.
D3 gera HTML dinamicamente sem conhecimento de Angulars e Angular não pode aplicar as classes para fazer com que os estilos se apliquem no HTML gerado.
Se você adicionar os estilos no arquivo HTML do ponto de entrada, o Angular também não reescreverá os estilos e as classes auxiliares adicionadas não terão efeito.
Com
encapsulation: ViewEncapsulation.None
o Angular não faz essa reescrita, portanto, o resultado é semelhante a adicionar o HTML aoindex.html
.Alternativamente, você pode usar os combinadores CSS de perfuração de sombra recentemente introduzidos
>>>
,/deep/
e::shadow
. Consulte também http://stackoverflow.com/a/36225709/217408