web-dev-qa-db-fra.com

Quel est l'équivalent de d3.js v4.0 pour d3.scale.category10 ()?

J'essaie d'apprendre le d3 avec le livre de visualisation Web interactive, mais beaucoup de choses ont changé avec la version 4.0. Une chose que je ne peux vraiment pas comprendre, c'est s'il existe un équivalent pour d3.scale.category10 () pour obtenir un mappage facile des couleurs. Y at-il quelque chose comme ça dans la nouvelle version ou devons-nous utiliser math.random et coder quelque chose nous-mêmes?

d3.js
65
anonygrits

Au lieu de 

d3.scale.category10()

utilisation 

d3.scaleOrdinal(d3.schemeCategory10);

Créez une échelle de couleurs comme celle-ci:

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

utilisez la couleur comme celle-ci dans le même code que dans 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

112
Cyril

Une solution simple consiste à utiliser les échelles de couleurs suivantes 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. Vous pouvez donc utiliser leurs différents index 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])

Pour référence, jetez un oeil ici: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

J'espère que cela pourra aider.

0
shwetabharti