Qu'est-ce que l'd3.js v4.0 l'équivalent de la d3.l'échelle.category10()?

J'essaie d'apprendre à d3 avec le Web Interactif de Visualisation de livre, mais beaucoup de choses ont changé avec la version 4.0. Une chose que je ne peux pas vraiment savoir si il existe un équivalent pour la d3.l'échelle.category10() pour obtenir une simple cartographie des couleurs. Est-il quelque chose de semblable dans la nouvelle version, ou devons-nous utiliser les maths.aléatoire et le code en place quelque chose de nous-mêmes?

InformationsquelleAutor anonygrits | 2016-07-15
  1. 118

    Au lieu de 

    d3.scale.category10()

    utilisation 

    d3.scaleOrdinal(d3.schemeCategory10);

    Créer une échelle de couleurs comme ceci:

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    utiliser la couleur comme ceci dans le code même que dans la V3:

    svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", color(3))

    lire ici

    Référence ici

    code de travail ici

    • Merci! Je viens de faire défiler le document de changement et enfin trouvé l'explication.
    • N'importe quel numéro que vous fournissez à color(), dans votre code de travail, la sortie est toujours bleu et d'orange, c'est que le comportement attendu? Que faire si je veux violet?
    • Cela semble être une solution, à ce que j'attendais: color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));
    • "dans votre code de travail, la sortie est toujours bleu et d'orange, c'est que le comportement attendu?` Non c'est pas prévu, je suis vert ici plnkr.co/modifier/2DzxaDg1SjidDkz5v2P4?p=preview
    InformationsquelleAutor Cyril Cherian
  2. 1

    D'une solution simple est d'utiliser les échelles de couleur dans la version 4 de d3.js :

    var colorScale_1 = d3.schemeCategory10;
var colorScale_2 = schemeCategory20;
var colorScale_3 = d3.schemeCategory20b;
var colorScale_4 = d3.schemeCategory20c;

    colorScale_1, colorScale_2, colorScale_3, colorScale_4 sont les tableaux de différentes couleurs. Ainsi, vous pouvez utiliser leurs différents indices pour remplir la forme. Par exemple

    svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", colorScale_1[2])

    De référence, prendre un coup d'oeil ici: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

    Espère que ça aide.

    InformationsquelleAutor shwetabharti