El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Enllaç de Dades Eficient

Següent ►
►

En aquest tema, explorarem tècniques i estratègies per enllaçar dades de manera eficient en D3.js. L'enllaç de dades és un concepte fonamental en D3.js que permet associar dades a elements del DOM, facilitant la creació de visualitzacions dinàmiques i interactives. Aprendre a fer-ho de manera eficient és crucial per mantenir un bon rendiment, especialment quan es treballa amb grans conjunts de dades.

Objectius

  • Entendre el procés d'enllaç de dades en D3.js.
  • Aprendre tècniques per optimitzar l'enllaç de dades.
  • Implementar exemples pràctics d'enllaç de dades eficient.

Conceptes Clau

  1. Enllaç de Dades en D3.js

L'enllaç de dades en D3.js es realitza mitjançant les funcions .data(), .enter(), .exit(), i .merge(). Aquestes funcions permeten associar dades a elements del DOM i gestionar la creació, actualització i eliminació d'aquests elements.

  1. Seleccions i Enllaç de Dades

D3.js utilitza seleccions per identificar elements del DOM als quals es vol associar dades. Les seleccions es poden crear amb .select() i .selectAll().

  1. Enter, Update i Exit

  • Enter: Gestiona els nous elements que necessiten ser creats per a les dades que no tenen un element corresponent al DOM.
  • Update: Gestiona els elements existents que necessiten ser actualitzats amb les noves dades.
  • Exit: Gestiona els elements que ja no tenen dades associades i necessiten ser eliminats.

Exemples Pràctics

Exemple 1: Enllaç Bàsic de Dades

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enllaç de Dades Bàsic</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        // Dades
        const data = [10, 20, 30, 40, 50];

        // Selecció i enllaç de dades
        const svg = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 100);

        const circles = svg.selectAll("circle")
            .data(data);

        // Enter
        circles.enter().append("circle")
            .attr("cx", (d, i) => (i * 100) + 50)
            .attr("cy", 50)
            .attr("r", d => d / 2)
            .attr("fill", "blue");
    </script>
</body>
</html>

Exemple 2: Enllaç de Dades Eficient amb Enter, Update i Exit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enllaç de Dades Eficient</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        // Dades inicials
        let data = [10, 20, 30, 40, 50];

        // Funció per actualitzar la visualització
        function update(data) {
            const svg = d3.select("body").select("svg");

            // Selecció i enllaç de dades
            const circles = svg.selectAll("circle")
                .data(data);

            // Enter
            circles.enter().append("circle")
                .attr("cx", (d, i) => (i * 100) + 50)
                .attr("cy", 50)
                .attr("r", d => d / 2)
                .attr("fill", "blue");

            // Update
            circles.attr("r", d => d / 2);

            // Exit
            circles.exit().remove();
        }

        // Creació inicial del SVG
        const svg = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 100);

        // Actualització inicial
        update(data);

        // Simulació d'una actualització de dades
        setTimeout(() => {
            data = [15, 25, 35];
            update(data);
        }, 2000);
    </script>
</body>
</html>

Exercicis Pràctics

Exercici 1: Enllaç de Dades amb Text

Objectiu: Crear una visualització que mostri un conjunt de dades com a text dins d'un SVG.

Instruccions:

  1. Crea un SVG de 500x100 píxels.
  2. Enllaça un conjunt de dades de nombres a elements de text dins del SVG.
  3. Mostra cada nombre en una posició diferent dins del SVG.

Solució:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercici 1: Enllaç de Dades amb Text</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        // Dades
        const data = [5, 10, 15, 20, 25];

        // Creació del SVG
        const svg = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 100);

        // Selecció i enllaç de dades
        const texts = svg.selectAll("text")
            .data(data);

        // Enter
        texts.enter().append("text")
            .attr("x", (d, i) => (i * 100) + 50)
            .attr("y", 50)
            .attr("text-anchor", "middle")
            .attr("font-size", "20px")
            .text(d => d);
    </script>
</body>
</html>

Exercici 2: Actualització de Dades amb Transicions

Objectiu: Crear una visualització que actualitzi els elements amb una transició suau quan les dades canvien.

Instruccions:

  1. Crea un SVG de 500x100 píxels.
  2. Enllaça un conjunt de dades inicial a elements de cercle dins del SVG.
  3. Implementa una funció per actualitzar les dades i aplicar una transició suau als cercles.

Solució:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercici 2: Actualització de Dades amb Transicions</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        // Dades inicials
        let data = [10, 20, 30, 40, 50];

        // Funció per actualitzar la visualització
        function update(data) {
            const svg = d3.select("body").select("svg");

            // Selecció i enllaç de dades
            const circles = svg.selectAll("circle")
                .data(data);

            // Enter
            circles.enter().append("circle")
                .attr("cx", (d, i) => (i * 100) + 50)
                .attr("cy", 50)
                .attr("r", 0)
                .attr("fill", "blue")
                .transition()
                .duration(1000)
                .attr("r", d => d / 2);

            // Update
            circles.transition()
                .duration(1000)
                .attr("r", d => d / 2);

            // Exit
            circles.exit().transition()
                .duration(1000)
                .attr("r", 0)
                .remove();
        }

        // Creació inicial del SVG
        const svg = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 100);

        // Actualització inicial
        update(data);

        // Simulació d'una actualització de dades
        setTimeout(() => {
            data = [15, 25, 35];
            update(data);
        }, 2000);
    </script>
</body>
</html>

Resum

En aquest tema, hem après com enllaçar dades de manera eficient en D3.js utilitzant les funcions .data(), .enter(), .exit(), i .merge(). Hem vist exemples pràctics de com gestionar l'entrada, actualització i sortida d'elements del DOM, i hem practicat amb exercicis per reforçar aquests conceptes. L'enllaç de dades eficient és crucial per mantenir un bon rendiment en les visualitzacions, especialment quan es treballa amb grans conjunts de dades.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats