Estoy usando Angular 2 y D3.js. Quiero mostrar un rectángulo rojo.
Solo funciona si pongo estilos en el archivo style.css . Mira este plunkr
Cuando pongo mis estilos en el componente styles: []
, no funciona. Mira este plunkr
Consulte Desbordamiento de pila .
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());
}
}
Eso es por diseño. Angular agrega nombres de clase exclusivos para los componentes y reescribe los estilos agregados para que solo se apliquen a los componentes donde se agregaron.
D3 genera HTML dinámicamente sin el conocimiento de Angulars y Angular no puede aplicar las clases para hacer que los estilos se apliquen en el HTML generado.
Si agrega los estilos en el archivo HTML del punto de entrada, Angular tampoco reescribe los estilos y las clases auxiliares agregadas no surten efecto.
Con encapsulation: ViewEncapsulation.None
Angular no hace esta reescritura, por lo tanto, el resultado es similar a agregar el HTML a index.html
.
Alternativamente, puede usar los combinadores CSS de perforación de sombras recientemente introducidos >>>
, /deep/
y ::shadow
. Consulte también http://stackoverflow.com/a/36225709/217408
@zoechi muchas gracias!! ¡Está funcionando perfectamente!
Para otras personas, para obtener más detalles sobre la solución de @zoechi , consulte aquí
Este problema se ha bloqueado automáticamente debido a la inactividad.
Presente un nuevo problema si encuentra un problema similar o relacionado.
Obtenga más información sobre nuestra política de bloqueo automático de conversaciones .
_Esta acción ha sido realizada automáticamente por un bot._
Comentario más útil
Eso es por diseño. Angular agrega nombres de clase exclusivos para los componentes y reescribe los estilos agregados para que solo se apliquen a los componentes donde se agregaron.
D3 genera HTML dinámicamente sin el conocimiento de Angulars y Angular no puede aplicar las clases para hacer que los estilos se apliquen en el HTML generado.
Si agrega los estilos en el archivo HTML del punto de entrada, Angular tampoco reescribe los estilos y las clases auxiliares agregadas no surten efecto.
Con
encapsulation: ViewEncapsulation.None
Angular no hace esta reescritura, por lo tanto, el resultado es similar a agregar el HTML aindex.html
.Alternativamente, puede usar los combinadores CSS de perforación de sombras recientemente introducidos
>>>
,/deep/
y::shadow
. Consulte también http://stackoverflow.com/a/36225709/217408