En este módulo, aprenderemos cómo manejar eventos en D3.js para hacer nuestras visualizaciones más interactivas y dinámicas. Los eventos son fundamentales para crear experiencias de usuario ricas y responsivas. Vamos a explorar cómo detectar y responder a diferentes tipos de eventos en D3.js.

1. Eventos del DOM: Eventos que ocurren en el Document Object Model (DOM), como clics, movimientos del ratón, y teclas presionadas.
2. Manejadores de Eventos: Funciones que se ejecutan en respuesta a un evento.
3. Selección de Elementos: Usar D3.js para seleccionar elementos del DOM a los que se les asignarán manejadores de eventos.

• click: Ocurre cuando un elemento es clicado.
• mouseover: Ocurre cuando el puntero del ratón se mueve sobre un elemento.
• mouseout: Ocurre cuando el puntero del ratón se mueve fuera de un elemento.
• mousemove: Ocurre cuando el puntero del ratón se mueve dentro de un elemento.
• keydown: Ocurre cuando una tecla es presionada.

Vamos a empezar con un ejemplo simple donde manejamos un evento de clic en un círculo SVG.

En este ejemplo, hemos añadido un manejador de evento de clic al círculo. Cuando el círculo es clicado, su color cambia de azul a rojo.

• d3.select("svg"): Selecciona el elemento SVG.
• svg.append("circle"): Añade un círculo al SVG.
• .attr("cx", 250), .attr("cy", 250), .attr("r", 50), .attr("fill", "blue"): Establece los atributos del círculo.
• .on("click", function(event) { ... }): Añade un manejador de evento de clic al círculo. La función anónima se ejecuta cuando el círculo es clicado.
• d3.select(this).attr("fill", "red"): Cambia el color del círculo a rojo.

Modifica el código anterior para que el círculo cambie de color a verde cuando el ratón se mueva sobre él.

En este código, hemos añadido dos manejadores de eventos adicionales:

• .on("mouseover", function(event) { ... }): Cambia el color del círculo a verde cuando el ratón se mueve sobre él.
• .on("mouseout", function(event) { ... }): Cambia el color del círculo de vuelta a azul cuando el ratón se mueve fuera del círculo.

En esta sección, hemos aprendido cómo manejar eventos en D3.js para hacer nuestras visualizaciones más interactivas. Hemos cubierto los conceptos básicos de los eventos del DOM y cómo añadir manejadores de eventos a los elementos seleccionados. También hemos visto ejemplos prácticos y ejercicios para reforzar estos conceptos.

En el próximo módulo, exploraremos cómo crear transiciones en D3.js para animar nuestras visualizaciones.