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

HOME

En aquest tema, aprendrem com enllaçar dades als elements del DOM utilitzant D3.js. Aquest és un concepte fonamental en D3.js, ja que permet crear visualitzacions dinàmiques i interactives basades en dades.

Objectius

Entendre el concepte d'enllaç de dades en D3.js.
Aprendre a utilitzar les funcions data(), enter(), update() i exit().
Crear exemples pràctics d'enllaç de dades.

Conceptes Clau

Enllaç de Dades

L'enllaç de dades és el procés d'associar dades a elements del DOM. D3.js facilita aquest procés amb la funció data(), que permet associar un conjunt de dades a una selecció d'elements.

Funcions Clau

data(dataArray): Enllaça un conjunt de dades a una selecció d'elements.
enter(): Crea nous elements per a les dades que no tenen un element corresponent en la selecció actual.
update(): Actualitza els elements existents amb les dades noves.
exit(): Elimina els elements que ja no tenen dades associades.

Exemple Pràctic

Pas 1: Preparar l'Entorn

Assegura't de tenir un fitxer HTML amb un element <svg> on dibuixarem els nostres elements.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Enllaçant Dades amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="300"></svg>
    <script src="script.js"></script>
</body>
</html>

Pas 2: Enllaçar Dades als Elements

script.js

// Seleccionem l'element SVG
const svg = d3.select("svg");

// Dades d'exemple
const data = [10, 20, 30, 40, 50];

// Enllacem les dades als cercles
const circles = svg.selectAll("circle")
    .data(data);

// Utilitzem enter() per crear nous cercles per a les dades noves
circles.enter()
    .append("circle")
    .attr("cx", (d, i) => (i * 50) + 25) // Posició horitzontal
    .attr("cy", 150) // Posició vertical
    .attr("r", d => d) // Radi basat en les dades
    .attr("fill", "blue");

Explicació del Codi

Selecció de l'element SVG: Utilitzem d3.select("svg") per seleccionar l'element SVG on dibuixarem els cercles.
Dades d'exemple: Definim un array de dades [10, 20, 30, 40, 50].
Enllaç de dades: Utilitzem svg.selectAll("circle").data(data) per enllaçar les dades als cercles. Com que inicialment no hi ha cercles, la selecció estarà buida.
Creació de nous elements: Utilitzem enter() per crear nous cercles per a cada element de dades. Els atributs cx, cy, r i fill es defineixen basant-se en les dades.

Pas 3: Actualitzar i Eliminar Elements

script.js (continuació)

// Dades noves
const newData = [15, 25, 35];

// Enllacem les dades noves als cercles
const updatedCircles = svg.selectAll("circle")
    .data(newData);

// Actualitzem els cercles existents
updatedCircles
    .attr("r", d => d)
    .attr("fill", "green");

// Eliminem els cercles que ja no tenen dades associades
updatedCircles.exit().remove();

Explicació del Codi

Dades noves: Definim un nou array de dades [15, 25, 35].
Enllaç de dades noves: Utilitzem svg.selectAll("circle").data(newData) per enllaçar les dades noves als cercles existents.
Actualització d'elements: Utilitzem updatedCircles.attr("r", d => d).attr("fill", "green") per actualitzar els cercles existents amb les noves dades.
Eliminació d'elements: Utilitzem updatedCircles.exit().remove() per eliminar els cercles que ja no tenen dades associades.

Exercicis Pràctics

Exercici 1: Crear Rectangles

Crea un conjunt de rectangles en un element SVG basant-te en un array de dades. Cada rectangle ha de tenir una amplada basada en les dades.

Solució

const svg = d3.select("svg");
const data = [10, 20, 30, 40, 50];

const rectangles = svg.selectAll("rect")
    .data(data);

rectangles.enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", 50)
    .attr("width", d => d)
    .attr("height", 40)
    .attr("fill", "orange");

Exercici 2: Actualitzar i Eliminar Rectangles

Actualitza els rectangles existents amb un nou conjunt de dades i elimina els rectangles que ja no tenen dades associades.

Solució

const newData = [15, 25, 35];

const updatedRectangles = svg.selectAll("rect")
    .data(newData);

updatedRectangles
    .attr("width", d => d)
    .attr("fill", "purple");

updatedRectangles.exit().remove();

Resum

En aquest tema, hem après com enllaçar dades als elements del DOM utilitzant D3.js. Hem vist com utilitzar les funcions data(), enter(), update() i exit() per crear, actualitzar i eliminar elements basats en dades. Aquests conceptes són fonamentals per crear visualitzacions dinàmiques i interactives amb D3.js.

Enllaçant Dades als Elements

Objectius

Conceptes Clau

Enllaç de Dades

Funcions Clau

Exemple Pràctic

Pas 1: Preparar l'Entorn

Pas 2: Enllaçar Dades als Elements

script.js

Explicació del Codi

Pas 3: Actualitzar i Eliminar Elements

script.js (continuació)

Explicació del Codi

Exercicis Pràctics

Exercici 1: Crear Rectangles

Solució

Exercici 2: Actualitzar i Eliminar Rectangles

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