Soy nuevo en d3js y en todo el mundo javascript también. En mi archivo html simplemente importo el script así:

<script src="https://d3js.org/d3.v4.min.js"></script>

Al tratar de usar lo siguiente:

var ordinalColorScale = d3.schemeCategory20();

Me sale la excepcion

TypeError no capturado: d3.schemeCategory20 no es una función en index.html: 48

¿Necesito algún otro módulo d3js que deba importarse? ¿O qué pudo haber causado el problema?

3
Ira Re 1 nov. 2017 a las 13:37

5 respuestas

La mejor respuesta

d3.schemeCategory20 no es ni una escala ni una función. Es solo una matriz de colores. De acuerdo con la API, es ...

Una matriz de veinte colores categóricos representados como cadenas hexadecimales RGB.

La misma API dice:

Estos esquemas de color están diseñados para funcionar con d3.scaleOrdinal.

Por lo tanto, debe pasarlo a una escala ordinal como su rango, así:

var myScale = d3.scaleOrdinal()
    .range(d3.schemeCategory20)

Que es lo mismo de:

    var myScale = d3.scaleOrdinal(d3.schemeCategory20)

Aquí hay una demostración:

var scale = d3.scaleOrdinal(d3.schemeCategory20);

d3.select("body").selectAll(null)
  .data(d3.range(20))
  .enter()
  .append("div")
  .style("background-color", function(d){ return scale(d)})
div {
  min-height: 10px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
6
Gerardo Furtado 1 nov. 2017 a las 10:57

Para cualquiera que lo esté buscando en futuras versiones de d3 y también algo a tener en cuenta al usar este esquema de color. Cambios en D3 5.0:

D3 ya no proporciona los esquemas de color categóricos d3.schemeCategory20 *. Estos esquemas de veinte colores eran defectuosos porque su diseño agrupado podría implicar falsamente relaciones en los datos: un tono compartido puede implicar que los datos codificados son parte de un grupo (una supercategoría), mientras que la ligereza relativa puede implicar orden

De d3 / CHANGES.md

1
ill 28 oct. 2019 a las 09:34

d3.schemeCategory20 no es exactamente una función. Es una matriz de colores predeterminados. Debe pasar esta matriz a su función de escala.

console.log('d3.schemeCategory20 ==> ', d3.schemeCategory20);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
1
Mikhail Shabrikov 1 nov. 2017 a las 10:46

(v5) D3 ya no proporciona los esquemas de color categóricos d3.schemeCategory20 *. Estos esquemas de veinte colores eran defectuosos porque su diseño agrupado podría implicar falsamente relaciones en los datos: un tono compartido puede implicar que los datos codificados son parte de un grupo (una súper categoría), mientras que la ligereza relativa puede implicar orden. En cambio, D3 ahora incluye d3-scale-chromatic, que implementa excelentes esquemas de ColorBrewer, incluidos esquemas categóricos, divergentes, secuenciales de un solo tono y secuenciales de múltiples tonos. Estos esquemas están disponibles en variantes discretas y continuas.

https://github.com/d3/d3/blob/master/CHANGES.md

1
Sid Chou 29 mar. 2020 a las 21:36

Para d3 v4. Puedes usar como como

   var color = d3.scaleOrdinal(d3.schemeCategory20c);
                     or
    var color = d3.scaleOrdinal()
      .range(["red", "green", "blue", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
4
Manzer 1 nov. 2017 a las 18:11