Comment personnaliser l'échelle de couleurs dans un graphique en courbes D3?

Comment puis-je changer la couleur des lignes dans un d3 ligne graphique, par exemple dans Mike Bostock multi-série D3 ligne graphique.

Dans son exemple de graphique, Mike Bostock utilise D3 intégré "category10" échelle de couleurs, que par cette ligne de code:

var color = d3.scale.category10();

Mais supposons que, au lieu de la balance intégrée, nous avons voulu la ligne pour Austin bleu, la ligne de New York rouge, et la ligne de San Francisco verte. Devrait être assez simple, non? Il suffit de définir une échelle de couleurs personnalisée:

var color = d3.scale.ordinal()
    .domain(["New York", "San Francisco", "Austin"])
    .range("#FF0000", "#009933" , "#0000FF");

J'ai pensé que peut faire l'affaire – mais il transforme toute la série noire. J'ai essayé le style CSS de chaque série par l'ajout de classes, mais cela ne fonctionne pas.

source d'informationauteur victorz

  1. 41

    Vous êtes seul manque les crochets autour de les valeurs dans .range() -- il prend un tableau en argument. Si le code doit être

    var color = d3.scaleOrdinal() //D3 Version 4
  .domain(["New York", "San Francisco", "Austin"])
  .range(["#FF0000", "#009933" , "#0000FF"]);

    Exemple complet ici.

  2. 9

    pour D3 v4

       let color = d3.scaleOrdinal()
      .domain(["New York", "San Francisco", "Austin"])
      .range(["#FF0000", "#009933" , "#0000FF"]);