El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com modificar elements del DOM utilitzant D3.js. Aquesta habilitat és fonamental per crear visualitzacions dinàmiques i interactives. Ens centrarem en com canviar atributs, estils i contingut dels elements seleccionats.

Conceptes Clau

Atributs: Propietats dels elements HTML, com ara id, class, width, height, etc.
Estils: Propietats CSS que defineixen l'aparença dels elements, com ara color, font-size, background-color, etc.
Contingut: Text o HTML que es troba dins d'un element.

Modificant Atributs

D3.js proporciona el mètode .attr() per modificar els atributs dels elements seleccionats.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modificant Atributs amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500">
        <circle cx="50" cy="50" r="40"></circle>
    </svg>
    <script>
        // Seleccionem el cercle i modifiquem els seus atributs
        d3.select("circle")
            .attr("cx", 100)
            .attr("cy", 100)
            .attr("r", 50)
            .attr("fill", "blue");
    </script>
</body>
</html>

Explicació

Selecció: d3.select("circle") selecciona el primer element <circle> del document.
Modificació d'Atributs: Utilitzem .attr() per canviar els atributs cx, cy, r i fill del cercle.

Modificant Estils

Per modificar els estils CSS dels elements, utilitzem el mètode .style().

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modificant Estils amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="myDiv">Hola, D3.js!</div>
    <script>
        // Seleccionem el div i modifiquem els seus estils
        d3.select("#myDiv")
            .style("color", "red")
            .style("font-size", "24px")
            .style("background-color", "yellow");
    </script>
</body>
</html>

Explicació

Selecció: d3.select("#myDiv") selecciona l'element <div> amb l'id myDiv.
Modificació d'Estils: Utilitzem .style() per canviar els estils color, font-size i background-color.

Modificant Contingut

Per modificar el contingut d'un element, utilitzem el mètode .text() o .html().

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modificant Contingut amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <p id="myParagraph">Text original</p>
    <script>
        // Seleccionem el paràgraf i modifiquem el seu contingut
        d3.select("#myParagraph")
            .text("Text modificat amb D3.js");
    </script>
</body>
</html>

Explicació

Selecció: d3.select("#myParagraph") selecciona l'element <p> amb l'id myParagraph.
Modificació de Contingut: Utilitzem .text() per canviar el text del paràgraf.

Exercicis Pràctics

Exercici 1

Modifica els atributs d'un rectangle SVG per canviar la seva posició, mida i color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercici 1</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500">
        <rect width="100" height="100"></rect>
    </svg>
    <script>
        // Escriu el teu codi aquí
    </script>
</body>
</html>

Solució

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercici 1 - Solució</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500">
        <rect width="100" height="100"></rect>
    </svg>
    <script>
        // Seleccionem el rectangle i modifiquem els seus atributs
        d3.select("rect")
            .attr("x", 50)
            .attr("y", 50)
            .attr("width", 200)
            .attr("height", 200)
            .attr("fill", "green");
    </script>
</body>
</html>

Exercici 2

Modifica els estils d'un paràgraf per canviar el seu color de text, mida de font i color de fons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercici 2</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <p id="myParagraph">Text original</p>
    <script>
        // Escriu el teu codi aquí
    </script>
</body>
</html>

Solució

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercici 2 - Solució</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <p id="myParagraph">Text original</p>
    <script>
        // Seleccionem el paràgraf i modifiquem els seus estils
        d3.select("#myParagraph")
            .style("color", "blue")
            .style("font-size", "20px")
            .style("background-color", "lightgray");
    </script>
</body>
</html>

Resum

En aquesta secció, hem après com modificar elements del DOM utilitzant D3.js. Hem vist com canviar atributs, estils i contingut dels elements seleccionats. Aquestes tècniques són essencials per crear visualitzacions dinàmiques i interactives. En el proper tema, explorarem com enllaçar dades als elements del DOM per crear visualitzacions basades en dades.

Modificant Elements

Conceptes Clau

Modificant Atributs

Exemple

Explicació

Modificant Estils

Exemple

Explicació

Modificant Contingut

Exemple

Explicació

Exercicis Pràctics

Exercici 1

Solució

Exercici 2

Solució

Resum

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

Mòdul 4: Creant Visualitzacions Bàsiques

Mòdul 5: Visualitzacions Avançades

Mòdul 6: Interactivitat i Animació

Mòdul 7: Treballant amb Dades Reals

Mòdul 8: Rendiment i Optimització

Mòdul 9: Millors Pràctiques i Tècniques Avançades

Mòdul 10: Projecte Final