Hola Mundo
Creemos una visualización sencilla basada en datos con tecnología D3 para probar tu configuración. Crea un nuevo archivo HTML en tu entorno de desarrollo e importa la biblioteca D3, o impórtala a cualquier página HTML usando la etiqueta <script>, como se muestra en la sección anterior. Luego, agrega un bloque <svg> y un bloque <script> dentro del <body> de tu página, como se indica a continuación:
<body> <svg id="chart" width="600" height="200"></svg> <script> </script> </body>Ahora agregue la siguiente matriz dentro del bloque <script>:
const array = [100, 200, 300, 350, 375, 400, 500];Usaremos esa matriz para generar una serie de puntos. Escriba el siguiente código (puede ignorar los comentarios), que consiste en una serie de comandos encadenados:
d3.select("#chart") // selecciona el elemento SVG por ID (como JQuery) .selectAll("circle") // declara los elementos que nos gustaría crear .data([100]) // establece los datos para impulsar la creación de los elementos .enter() // crea una selección para agregar elementos por elemento de datos .append("circle") // añade un elemento círculo de este tipo a cada elemento de datos .attr("r", 10) // establece el atributo "r" radio .attr("cy", 100) // establece el atributo "cy" eje y (vertical) .sttr("cx", d => d) // establece el atributo "cx" (igual que function(d) { return d; } Si tu configuración funciona correctamente, cuando cargues la página que contiene este código en un navegador, deberías ver un solo punto en la pantalla:
Si inspecciona el punto con las herramientas de desarrollo de JavaScript de su navegador, notará que el siguiente código se generó dentro del SVG:
<svg width="600" height="200"> <circle r="10" cy="100" cx="100"></circle> </svg>El código JavaScript anterior selecciona el elemento <svg> de la página y, a continuación, todos los elementos <circle> que contiene. Sin embargo, no hay ninguno, por lo que la selección está vacía. La siguiente línea, sin embargo, contiene el comando data() con un array de un solo elemento: [100]. El comando enter() vincula los datos a la selección, creando una selección de marcadores <circle> del mismo tamaño que el array de datos. En este caso, solo contendrá un marcador. Finalmente, el comando append(), ejecutado en el contexto de esta selección, le añade un elemento <circle>, convirtiéndolo en un elemento secundario del elemento <svg>.
Los tres últimos comandos establecen valores de atributos, y el último toma una función y devuelve el elemento recibido por esta, que se utiliza como valor del atributo. Este elemento es el valor 100, almacenado en la matriz pasada al comando data().
El código está disponible en el archivo HelloWorld/1-intro-d3.html del repositorio de GitHub para este capítulo.
Ahora, hagamos algunos cambios. Reemplace [100] en el comando data() por array. Ahora hará referencia al array de siete elementos que creamos antes:
.data (array)Ejecute la página de nuevo. ¿Qué sucedió? Observe la siguiente captura de pantalla:
Ahora hay siete puntos en la pantalla; la misma cantidad que la matriz de datos. Cada punto se posiciona en una posición horizontal diferente (definida por la propiedad cx de <circle>), que se establece con valores de la matriz de datos. Usamos la matriz de datos para determinar la posición de cada círculo.
Ahora omite una línea y agrega este código después de la selección (ver HelloWorld/3-update.html):
setTimeout(function() { d3.select("#chart") .selectAll("circle") .data([50, 75, 125, 225, 325, 425, 450]) .attr("r", 5) .attr("cx", d => d) .style("fill", "red") }, 2000)Este código se ejecutará dos segundos después de cargar la página y mostrará los círculos en las posiciones definidas por la primera cadena de comandos. La función que contiene selecciona de nuevo el elemento SVG #chart y, a continuación, todos los círculos que contiene. Pero esta vez, estos círculos sí existen. El comando data() vincula una nueva matriz de datos a la selección. No se llama al comando enter() porque no hay elementos que añadir.
Los comandos attr() se usan para los atributos del círculo. En el código anterior, solo se llamaron dos comandos attr(), ya que solo estamos modificando dos atributos: el radio del círculo y la posición, que ahora obtendrá su valor del nuevo array. Además, también usamos style() para cambiar el color de los puntos. Si ejecuta este archivo, dos segundos después, los puntos se encogen, se desplazan a la izquierda y se vuelven rojos:
Una característica muy útil de D3 es la simplicidad de animar transiciones. Solo necesitas encadenar un comando transition() antes de los atributos y estilos que cambiaron. La transición predeterminada dura un cuarto de segundo. Vamos a aumentarla un poco más configurando la duración. Agrega la siguiente línea entre el comando data() y el primer attr() para agregar una transición de un segundo durante la actualización de datos:
.transition () .duration(1000)El cuerpo de tu página ahora debería verse así (ver HelloWorld/4-translation.html):
<body> <svg id="chart" width="600" height="200"></svg> <script> const array = [100, 200, 300, 350, 375, 400, 500]; d3.select("#chart") .selectAll("circle") .data(array) .enter() .append("circle") .attr("r", "10") .attr("cy", 100) .attr("cx", d => d) setTimeout(function() { d3.select("#chart") .selectAll("circle") .data([50, 75, 125, 225, 325, 425, 450]) .transition() .duration(1000) . attr("r", 5) .attr("cx", d => d) .style("fill", "red") }, 2000) </script> </body>Ahora, después de dos segundos, los puntos cambiarán de color, se encogerán y se moverán hacia la izquierda durante otro segundo. ¡Felicitaciones! Creaste una aplicación D3 completa, con actualizaciones de datos y transiciones.