¿Cuál es el equivalente de d3.js v4.0 para d3.scale.category10 ()?

82

Estoy tratando de aprender d3 con el libro Visualización web interactiva, pero muchas cosas han cambiado con la versión 4.0. Una cosa que realmente no puedo entender es si hay un equivalente para d3.scale.category10 () para obtener un mapeo fácil de colores. ¿Hay algo así en la nueva versión o necesitamos usar math.random y codificar algo nosotros mismos?

d3.js anonygrits
fuente

Respuestas:

143

En vez de 

d3.scale.category10()

utilizar 

d3.scaleOrdinal(d3.schemeCategory10);

Crea una escala de colores como esta:

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

use el color como este en el código igual que en V3:

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

leer aquí

Referencia aquí

código de trabajo aquí

Cyril Cherian
fuente
1
¡Gracias! Estaba desplazándome por el documento de cambios y finalmente encontré la explicación.
anonygrits
No importa a qué número proporcione color(), en su código de trabajo, la salida es siempre azul y naranja, ¿es ese el comportamiento esperado? ¿Y si quiero morado?
dbj44
2
Esto parece ser una solución, a lo que esperaba:color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));
dbj44
`En el código de trabajo, la salida es siempre azul y naranja - se espera que el comportamiento` No se espera que eso no estoy recibiendo verde aquí plnkr.co/edit/2DzxaDg1SjidDkz5v2P4?p=preview
Cyril Cherian
3

Una solución sencilla es utilizar las siguientes escalas de color en la versión 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 son las matrices de diferentes colores. Entonces, puede usar sus diferentes índices para rellenar la forma. Por ejemplo

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

Para referencia, eche un vistazo aquí: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

Espero que ayude.

shwetabharti
fuente