En aquest tema, aprendrem com gestionar esdeveniments en D3.js per fer les nostres visualitzacions més interactives. Els esdeveniments són una part fonamental de la interactivitat en les aplicacions web, i D3.js proporciona eines potents per treballar amb ells.

1. Esdeveniments del DOM: Els esdeveniments del Document Object Model (DOM) són accions que es produeixen com a resultat de la interacció de l'usuari amb la pàgina web, com ara clics, moviments del ratolí, i tecles pressionades.
2. Gestors d'Esdeveniments: Funcions que s'executen en resposta a un esdeveniment específic.
3. Seleccions de D3: Utilitzem seleccions de D3 per associar gestors d'esdeveniments als elements del DOM.

Primer, crearem un element SVG on afegirem un cercle que respondrà a un esdeveniment de clic.

Ara, afegirem un gestor d'esdeveniments de clic al cercle.

• .on("click", function(event) { ... }): Aquest mètode afegeix un gestor d'esdeveniments de clic al cercle. Quan el cercle es clica, la funció proporcionada s'executa.
• d3.select(this): Selecciona l'element que va desencadenar l'esdeveniment (en aquest cas, el cercle).
• .attr("fill", "red"): Canvia el color de farciment del cercle a vermell.

1. Objectiu: Canviar el color del cercle a verd quan el ratolí passa per sobre i tornar-lo a blau quan el ratolí surt.
2. Instruccions:
   • Afegiu dos gestors d'esdeveniments: un per a l'esdeveniment mouseover i un altre per a l'esdeveniment mouseout.

• .on("mouseover", function(event) { ... }): Aquest mètode afegeix un gestor d'esdeveniments de pas del ratolí. Quan el ratolí passa per sobre del cercle, la funció proporcionada s'executa i canvia el color del cercle a verd.
• .on("mouseout", function(event) { ... }): Aquest mètode afegeix un gestor d'esdeveniments de sortida del ratolí. Quan el ratolí surt del cercle, la funció proporcionada s'executa i canvia el color del cercle a blau.

1. No Seleccionar Correctament l'Element: Assegureu-vos que d3.select(this) s'utilitza dins del gestor d'esdeveniments per referir-se a l'element que va desencadenar l'esdeveniment.
2. No Tancar Correctament les Funcions: Assegureu-vos que totes les funcions i mètodes estan correctament tancats amb parèntesis i claus.
3. Confusió d'Esdeveniments: Diferents esdeveniments poden tenir noms similars però efectes diferents (mouseover vs mouseenter). Consulteu la documentació de D3.js per assegurar-vos que utilitzeu l'esdeveniment correcte.

En aquesta secció, hem après com gestionar esdeveniments en D3.js per fer les nostres visualitzacions més interactives. Hem vist com afegir gestors d'esdeveniments de clic, pas del ratolí i sortida del ratolí a un element SVG. Aquests conceptes són fonamentals per crear visualitzacions dinàmiques i interactives.

En el següent tema, explorarem com crear transicions per animar les nostres visualitzacions.