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

Creant Transicions

Següent ►
►

Les transicions en D3.js permeten animar els canvis en les visualitzacions de dades, fent-les més dinàmiques i atractives. En aquest tema, aprendrem com crear transicions per a diferents elements gràfics utilitzant D3.js.

Conceptes Bàsics de les Transicions

Què és una Transició?

Una transició és un canvi gradual d'un estat a un altre. En D3.js, les transicions es poden aplicar a qualsevol propietat d'un element SVG, com ara la posició, el color, la mida, etc.

Sintaxi Bàsica

La sintaxi bàsica per crear una transició en D3.js és la següent:

d3.select("element")
  .transition()
  .duration(1000) // Durada en mil·lisegons
  .attr("attribute", "new_value"); // Atribut a animar

Exemple Pràctic: Transició de Color

Pas 1: Crear un Element SVG

Primer, creem un cercle SVG simple:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transició de Color</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="50" fill="blue"></circle>
  </svg>
  <script>
    // Codi D3.js aquí
  </script>
</body>
</html>

Pas 2: Aplicar una Transició de Color

Afegim una transició per canviar el color del cercle de blau a vermell:

d3.select("circle")
  .transition()
  .duration(2000) // 2 segons
  .attr("fill", "red");

El codi complet seria:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transició de Color</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="50" fill="blue"></circle>
  </svg>
  <script>
    d3.select("circle")
      .transition()
      .duration(2000) // 2 segons
      .attr("fill", "red");
  </script>
</body>
</html>

Exemple Pràctic: Transició de Posició

Pas 1: Crear un Element SVG

Creem un rectangle SVG simple:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transició de Posició</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="500">
    <rect x="50" y="50" width="100" height="100" fill="green"></rect>
  </svg>
  <script>
    // Codi D3.js aquí
  </script>
</body>
</html>

Pas 2: Aplicar una Transició de Posició

Afegim una transició per moure el rectangle a una nova posició:

d3.select("rect")
  .transition()
  .duration(1500) // 1.5 segons
  .attr("x", 300)
  .attr("y", 300);

El codi complet seria:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transició de Posició</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="500">
    <rect x="50" y="50" width="100" height="100" fill="green"></rect>
  </svg>
  <script>
    d3.select("rect")
      .transition()
      .duration(1500) // 1.5 segons
      .attr("x", 300)
      .attr("y", 300);
  </script>
</body>
</html>

Exercici Pràctic

Objectiu

Crea una visualització amb un cercle que canviï de mida i color quan es fa clic sobre ell.

Instruccions

  1. Crea un cercle SVG amb un radi inicial de 30 i color inicial blau.
  2. Afegeix un esdeveniment de clic que faci que el cercle canviï de radi a 60 i de color a vermell en 1 segon.

Solució

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Exercici de Transició</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="30" fill="blue"></circle>
  </svg>
  <script>
    d3.select("circle")
      .on("click", function() {
        d3.select(this)
          .transition()
          .duration(1000) // 1 segon
          .attr("r", 60)
          .attr("fill", "red");
      });
  </script>
</body>
</html>

Resum

En aquesta secció, hem après com crear transicions en D3.js per animar canvis en les propietats dels elements SVG. Hem vist exemples pràctics de transicions de color i posició, i hem realitzat un exercici per reforçar els conceptes apresos. Les transicions són una eina poderosa per fer que les visualitzacions de dades siguin més dinàmiques i atractives.

◄ 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