Post Top Ad

Your Ad Spot

jueves, 30 de julio de 2020

Crear un gráfico de barras con D3 JavaScript

Crear un gráfico de barras con D3 JavaScript

En este tutorial intentaremos crear un gráfico de barras básico con D3 JavaScript . 

Crear un gráfico de barras con D3 JavaScript

¡Buen trabajo! Ese es un gráfico de barras de aspecto decente para nuestra primera puñalada. 

  • selection.selectAll ()
  • selection.data ()
  • selection.enter ()
  • selection.append ()

Para comprender realmente cómo funciona todo esto, lea la documentación de los cuatro enlaces anteriores. escribió este tutorial para ayudar a comprender cómo estos métodos funcionan entre sí para crear la magia que hace D3. 

Cambiar los datos que alimentan el gráfico de barras

Solo para mostrar que, de hecho, el gráfico se representa en función de los valores proporcionados en la chartdatavariable, podemos cambiar los valores en esa matriz y observar el gráfico de barras actualizado que se crea.



El gráfico de barras decodificado

Recorrer el código con palabras ayudará a descifrar aún más cómo funciona esto. 

  • chartdata Una matriz de valores numéricos que potencian la longitud de cada barra
  • height Un único valor numérico que contiene la altura del SVG
  • width Un único valor numérico que contiene el ancho del SVG
  • barWidth Un único valor numérico que contiene el ancho de cada barra
  • barOffset Un único valor numérico que contiene el espacio entre barras

La primera parte de esto es bastante fácil. 

Esto toma el divcon la identificación de #bar-charty simplemente le agrega un SVG, estableciendo el ancho y la altura a los valores proporcionados en nuestras variables enumeradas anteriormente. 

En inglés simple, el fragmento anterior dice iterar sobre todos los valores contenidos en la chartdata matriz y para cada pieza de datos, agregue una etiqueta de rectángulo asociada a ella. .selectAll()método sea el último, pero así es como escribimos este enfoque declarativo en D3. 

El siguiente fragmento de JavaScript es solo un toque más avanzado. 

Si todavía eres bastante nuevo en JavaScript y lo anterior te parece jeroglífico, no temas. width, a height, una coordenada y una coordenada. xcoordenada determina dónde se ubica cada barra en el área SVG de izquierda a derecha, mientras que la coordenada determina dónde se ubica la barra en términos de arriba y abajo en el área SVG. coordenada, ¿qué pasaría? la coordenada se determina de arriba hacia abajo, por lo que sin ella solo tendríamos los datos de ubicación izquierda / derecha. 

Interesante. ycoordenada, parece que todo comienza de arriba hacia abajo. ycoordenada, necesitamos calcular la diferencia entre la altura del contenedor SVG y la altura (o longitud, si lo desea) de la barra. 


Introducción de escalas lineales y ordinales

Una cosa de la que carece este gráfico hasta ahora es la capacidad de escalar correctamente. 

Muy bien: podemos ver que ahora, la barra con el valor más grande ocupa todo el rango de espacio vertical en el gráfico, mientras que las otras barras se escalan en relación con esto. 

Factoring en escala horizontal

Ahora agreguemos un tipo diferente de escala al espaciado horizontal o de izquierda a derecha del gráfico. 

Usar colores con escala lineal

Si desea que su gráfico sea más atractivo visualmente, puede hacerlo aplicando colores a las barras en lugar de un solo color sólido. 

Agregar eventos a su gráfico de barras

Vamos a darle un poco de sabor a nuestro gráfico de barras. mouseover mouseout eventos para activar cada barra individual para cambiar los colores cuando se mueve sobre ella.

Nota: ¡ Mueva su mouse sobre esta tabla!


Aplicando transiciones D3

D3 tiene una capacidad increíble para crear lo que se llama una transición, lo que significa aplicar operadores y atributos de manera uniforme y uniforme a lo largo del tiempo, en lugar de inmediatamente. 

Para ver solo una transición simple en acción, haga clic aquí.

Haga clic para aplicar la transición D3

Aquí está el código para recrear el efecto de transición.