Angular: Les styles dans le composant pour D3.js ne s'affichent pas dans angulaire 2

Créé le 25 mars 2016  ·  3Commentaires  ·  Source: angular/angular

J'utilise Angular 2 et D3.js. Je veux montrer un rectangle rouge.

Cela ne fonctionne que si je mets des styles dans le fichier style.css . Vérifiez ce plunkr

Quand je mets mes styles dans le composant styles: [] , ça ne marche pas. Vérifiez ce plunkr

Reportez-vous à 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());
  }
}

Commentaire le plus utile

C'est par conception. Angular ajoute des noms de classe uniques aux composants et réécrit les styles ajoutés pour ne s'appliquer qu'aux composants où ils ont été ajoutés.

D3 génère du HTML dynamiquement sans la connaissance d'Angulars et Angular ne peut pas appliquer les classes pour que les styles s'appliquent au HTML généré.

Si vous ajoutez les styles au fichier HTML du point d'entrée, Angular ne réécrit pas non plus les styles et les classes d'assistance ajoutées ne prennent pas effet.

Avec encapsulation: ViewEncapsulation.None Angular ne fait pas cette réécriture, donc le résultat est similaire à l'ajout du code HTML au index.html .

Vous pouvez également utiliser les combinateurs CSS de perçage d'ombre récemment introduits >>> , /deep/ et ::shadow . Voir aussi http://stackoverflow.com/a/36225709/217408

Tous les 3 commentaires

C'est par conception. Angular ajoute des noms de classe uniques aux composants et réécrit les styles ajoutés pour ne s'appliquer qu'aux composants où ils ont été ajoutés.

D3 génère du HTML dynamiquement sans la connaissance d'Angulars et Angular ne peut pas appliquer les classes pour que les styles s'appliquent au HTML généré.

Si vous ajoutez les styles au fichier HTML du point d'entrée, Angular ne réécrit pas non plus les styles et les classes d'assistance ajoutées ne prennent pas effet.

Avec encapsulation: ViewEncapsulation.None Angular ne fait pas cette réécriture, donc le résultat est similaire à l'ajout du code HTML au index.html .

Vous pouvez également utiliser les combinateurs CSS de perçage d'ombre récemment introduits >>> , /deep/ et ::shadow . Voir aussi http://stackoverflow.com/a/36225709/217408

@zoechi merci beaucoup !! Cela fonctionne parfaitement !

Pour les autres personnes, pour plus de détails sur la solution de @zoechi , veuillez vérifier ici

Ce problème a été automatiquement verrouillé en raison d'une inactivité.
Veuillez déposer un nouveau problème si vous rencontrez un problème similaire ou connexe.

En savoir plus sur notre politique de verrouillage automatique des conversations .

_Cette action a été effectuée automatiquement par un bot._

Cette page vous a été utile?
0 / 5 - 0 notes