En aquest tema, aprendrem com seleccionar elements del Document Object Model (DOM) utilitzant D3.js. La selecció d'elements és una de les operacions més bàsiques i fonamentals en D3.js, ja que ens permet manipular i interactuar amb els elements HTML de la nostra pàgina web.
Conceptes Clau
Abans de començar amb els exemples pràctics, és important entendre alguns conceptes clau:
- Selecció: En D3.js, una selecció és un conjunt d'elements DOM que podem manipular.
- Metodes de Selecció: D3.js proporciona diversos mètodes per seleccionar elements, com
d3.select()id3.selectAll(). - Encadenament: D3.js permet encadenar múltiples operacions en una selecció, facilitant la manipulació d'elements de manera eficient.
Seleccionant un Element Únic
Per seleccionar un únic element del DOM, utilitzem el mètode d3.select(). Aquest mètode accepta un selector CSS com a argument i retorna el primer element que coincideix amb aquest selector.
Exemple
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Selecció d'Element Únic</title>
</head>
<body>
<h1 id="title">Hola, D3.js!</h1>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// Seleccionem l'element amb id "title"
var title = d3.select("#title");
// Canviem el text de l'element seleccionat
title.text("Benvingut a D3.js!");
</script>
</body>
</html>Explicació
- HTML: Tenim un element
<h1>amb l'id "title". - JavaScript: Utilitzem
d3.select("#title")per seleccionar l'element<h1>. - Manipulació: Utilitzem el mètode
.text()per canviar el text de l'element seleccionat.
Seleccionant Múltiples Elements
Per seleccionar múltiples elements del DOM, utilitzem el mètode d3.selectAll(). Aquest mètode accepta un selector CSS com a argument i retorna tots els elements que coincideixen amb aquest selector.
Exemple
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Selecció de Múltiples Elements</title>
</head>
<body>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// Seleccionem tots els elements <li>
var items = d3.selectAll("li");
// Canviem el text de cada element seleccionat
items.text(function(d, i) {
return "Element " + (i + 1) + " actualitzat";
});
</script>
</body>
</html>Explicació
- HTML: Tenim una llista no ordenada amb tres elements
<li>. - JavaScript: Utilitzem
d3.selectAll("li")per seleccionar tots els elements<li>. - Manipulació: Utilitzem el mètode
.text()amb una funció de retorn per actualitzar el text de cada element seleccionat. La funció rep dos arguments:d(dada associada) ii(índex de l'element).
Encadenament de Mètodes
D3.js permet encadenar múltiples mètodes en una selecció per realitzar diverses operacions de manera eficient.
Exemple
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Encadenament de Mètodes</title>
</head>
<body>
<p class="text">Paràgraf 1</p>
<p class="text">Paràgraf 2</p>
<p class="text">Paràgraf 3</p>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// Seleccionem tots els elements <p> amb la classe "text"
d3.selectAll("p.text")
.style("color", "blue") // Canviem el color del text
.style("font-size", "20px") // Canviem la mida de la font
.text("Text actualitzat"); // Canviem el text
</script>
</body>
</html>Explicació
- HTML: Tenim tres elements
<p>amb la classe "text". - JavaScript: Utilitzem
d3.selectAll("p.text")per seleccionar tots els elements<p>amb la classe "text". - Encadenament: Utilitzem
.style()per canviar el color i la mida de la font, i.text()per actualitzar el text de cada element seleccionat.
Exercicis Pràctics
Exercici 1
Descripció: Selecciona tots els elements <div> amb la classe "box" i canvia el seu color de fons a "lightblue".
Codi Inicial:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 1</title>
</head>
<body>
<div class="box">Caixa 1</div>
<div class="box">Caixa 2</div>
<div class="box">Caixa 3</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// Escriu el teu codi aquí
</script>
</body>
</html>Solució:
Exercici 2
Descripció: Selecciona l'element <h2> amb l'id "subtitle" i canvia el seu text a "Subtítol Actualitzat".
Codi Inicial:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 2</title>
</head>
<body>
<h2 id="subtitle">Subtítol Original</h2>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// Escriu el teu codi aquí
</script>
</body>
</html>Solució:
Conclusió
En aquesta secció, hem après com seleccionar elements del DOM utilitzant D3.js. Hem vist com seleccionar un únic element amb d3.select(), com seleccionar múltiples elements amb d3.selectAll(), i com encadenar mètodes per realitzar múltiples operacions de manera eficient. Aquests conceptes són fonamentals per treballar amb D3.js i ens permetran manipular i interactuar amb els elements HTML de les nostres visualitzacions.
En el següent tema, explorarem com modificar els elements seleccionats per personalitzar les nostres visualitzacions.
D3.js: De Principiant a Avançat
Mòdul 1: Introducció a D3.js
Mòdul 2: Treballant amb Seleccions
Mòdul 3: Dades i Escales
- Carregant i Analitzant Dades
- Utilitzant Escales de D3
- Escales Lineals i Ordinals
- Escales de Temps i Logarítmiques
Mòdul 4: Creant Visualitzacions Bàsiques
- Creant Gràfics de Barres
- Creant Gràfics de Línies
- Creant Gràfics de Pastís
- Creant Gràfics de Dispersió
Mòdul 5: Visualitzacions Avançades
- Creant Disposicions Jeràrquiques
- Creant Disposicions de Força
- Creant Mapes Geo
- Creant Visualitzacions Personalitzades
Mòdul 6: Interactivitat i Animació
Mòdul 7: Treballant amb Dades Reals
- Recuperant Dades d'APIs
- Neteja i Transformació de Dades
- Integració amb Altres Llibreries
- Estudis de Cas i Exemples
Mòdul 8: Rendiment i Optimització
- Optimitzant el Rendiment de D3.js
- Gestionant Grans Conjunts de Dades
- Enllaç de Dades Eficient
- Depuració i Resolució de Problemes
Mòdul 9: Millors Pràctiques i Tècniques Avançades
- Organització del Codi i Modularitat
- Components Reutilitzables
- Patrons Avançats de D3.js
- Contribuint a la Comunitat de D3.js