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

Afegint Interactivitat

Següent ►
►

En aquest tema, aprendrem com afegir interactivitat a les nostres visualitzacions amb D3.js. La interactivitat és una part fonamental de les visualitzacions modernes, ja que permet als usuaris explorar les dades de manera més dinàmica i intuïtiva.

Conceptes Clau

  1. Esdeveniments del Ratolí: Com ara mouseover, mouseout, click, etc.
  2. Esdeveniments de Teclat: Com ara keydown, keyup, etc.
  3. Manipulació d'Estils: Canviar estils CSS en resposta a esdeveniments.
  4. Actualització de Dades: Modificar les dades mostrades en resposta a esdeveniments.

Exemples Pràctics

Exemple 1: Canvi de Color en Passar el Ratolí

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Interactivitat amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .bar:hover {
            fill: orange;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const data = [10, 20, 30, 40, 50];
        const svg = d3.select("svg");
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        const x = d3.scaleBand()
            .domain(data.map((d, i) => i))
            .range([0, width])
            .padding(0.1);

        const y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .nice()
            .range([height, 0]);

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => x(i))
            .attr("y", d => y(d))
            .attr("width", x.bandwidth())
            .attr("height", d => height - y(d))
            .on("mouseover", function(event, d) {
                d3.select(this).style("fill", "orange");
            })
            .on("mouseout", function(event, d) {
                d3.select(this).style("fill", "steelblue");
            });
    </script>
</body>
</html>

Explicació:

  • Hem creat un gràfic de barres simple.
  • Utilitzem els esdeveniments mouseover i mouseout per canviar el color de les barres quan el ratolí passa per sobre.

Exemple 2: Mostrar Informació Addicional amb mouseover

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Interactivitat amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .tooltip {
            position: absolute;
            text-align: center;
            width: 60px;
            height: 28px;
            padding: 2px;
            font: 12px sans-serif;
            background: lightsteelblue;
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <div class="tooltip" style="opacity:0;"></div>
    <script>
        const data = [10, 20, 30, 40, 50];
        const svg = d3.select("svg");
        const tooltip = d3.select(".tooltip");
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        const x = d3.scaleBand()
            .domain(data.map((d, i) => i))
            .range([0, width])
            .padding(0.1);

        const y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .nice()
            .range([height, 0]);

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => x(i))
            .attr("y", d => y(d))
            .attr("width", x.bandwidth())
            .attr("height", d => height - y(d))
            .on("mouseover", function(event, d) {
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html(d)
                    .style("left", (event.pageX) + "px")
                    .style("top", (event.pageY - 28) + "px");
            })
            .on("mouseout", function(event, d) {
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);
            });
    </script>
</body>
</html>

Explicació:

  • Hem afegit una div amb la classe tooltip per mostrar informació addicional.
  • Utilitzem els esdeveniments mouseover i mouseout per mostrar i amagar la informació quan el ratolí passa per sobre de les barres.

Exercicis Pràctics

Exercici 1: Canvi de Color en Fer Clic

Objectiu: Modificar el codi per canviar el color de les barres quan es fa clic sobre elles.

Solució:

.on("click", function(event, d) {
    d3.select(this).style("fill", "green");
});

Exercici 2: Afegir una Línia de Referència

Objectiu: Afegir una línia horitzontal que es mogui amb el ratolí per mostrar el valor actual.

Solució:

const line = svg.append("line")
    .attr("class", "reference-line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", height)
    .attr("y2", height)
    .style("stroke", "red")
    .style("stroke-width", 2)
    .style("opacity", 0);

svg.on("mousemove", function(event) {
    const [x, y] = d3.pointer(event);
    line.attr("y1", y).attr("y2", y).style("opacity", 1);
}).on("mouseout", function() {
    line.style("opacity", 0);
});

Resum

En aquesta secció, hem après com afegir interactivitat a les nostres visualitzacions amb D3.js. Hem vist com utilitzar esdeveniments del ratolí per canviar estils i mostrar informació addicional. També hem practicat amb exercicis per reforçar els conceptes apresos. En el següent tema, explorarem com gestionar esdeveniments de manera més detallada.

◄ 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