El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Modificando Elementos

Siguiente ►
►

En este tema, aprenderemos cómo modificar elementos del DOM utilizando D3.js. Este es un paso crucial para crear visualizaciones dinámicas y atractivas. Vamos a cubrir los siguientes puntos:

  1. Seleccionar y Modificar Atributos
  2. Modificar Estilos
  3. Modificar Contenido de Texto
  4. Añadir y Eliminar Elementos

  1. Seleccionar y Modificar Atributos

D3.js nos permite seleccionar elementos del DOM y modificar sus atributos de manera sencilla. Utilizamos el método .attr() para este propósito.

Ejemplo Práctico

Supongamos que tenemos un SVG con un círculo y queremos cambiar su radio y color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modificar Atributos con D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500">
        <circle id="myCircle" cx="250" cy="250" r="50" fill="blue"></circle>
    </svg>
    <script>
        // Seleccionamos el círculo y modificamos sus atributos
        d3.select("#myCircle")
            .attr("r", 100) // Cambiamos el radio a 100
            .attr("fill", "red"); // Cambiamos el color a rojo
    </script>
</body>
</html>

Explicación

  • d3.select("#myCircle"): Selecciona el elemento con el id myCircle.
  • .attr("r", 100): Cambia el atributo r (radio) a 100.
  • .attr("fill", "red"): Cambia el atributo fill (color de relleno) a rojo.

  1. Modificar Estilos

Además de los atributos, también podemos modificar los estilos CSS de los elementos utilizando el método .style().

Ejemplo Práctico

Vamos a cambiar el borde del círculo.

<script>
    d3.select("#myCircle")
        .style("stroke", "black") // Añadimos un borde negro
        .style("stroke-width", "5px"); // Definimos el grosor del borde
</script>

Explicación

  • .style("stroke", "black"): Añade un borde negro al círculo.
  • .style("stroke-width", "5px"): Define el grosor del borde en 5 píxeles.

  1. Modificar Contenido de Texto

Para modificar el contenido de texto de un elemento, utilizamos el método .text().

Ejemplo Práctico

Supongamos que tenemos un párrafo y queremos cambiar su contenido.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modificar Texto con D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <p id="myParagraph">Texto original</p>
    <script>
        // Seleccionamos el párrafo y modificamos su contenido de texto
        d3.select("#myParagraph")
            .text("Texto modificado");
    </script>
</body>
</html>

Explicación

  • d3.select("#myParagraph"): Selecciona el elemento con el id myParagraph.
  • .text("Texto modificado"): Cambia el contenido de texto a "Texto modificado".

  1. Añadir y Eliminar Elementos

D3.js también nos permite añadir y eliminar elementos del DOM. Utilizamos los métodos .append() y .remove() para estos propósitos.

Ejemplo Práctico: Añadir Elementos

Vamos a añadir un nuevo círculo al SVG.

<script>
    d3.select("svg")
        .append("circle")
        .attr("cx", 150)
        .attr("cy", 150)
        .attr("r", 50)
        .attr("fill", "green");
</script>

Explicación

  • d3.select("svg"): Selecciona el elemento svg.
  • .append("circle"): Añade un nuevo elemento circle al svg.
  • .attr("cx", 150), .attr("cy", 150), .attr("r", 50), .attr("fill", "green"): Define los atributos del nuevo círculo.

Ejemplo Práctico: Eliminar Elementos

Vamos a eliminar el círculo original.

<script>
    d3.select("#myCircle").remove();
</script>

Explicación

  • d3.select("#myCircle"): Selecciona el elemento con el id myCircle.
  • .remove(): Elimina el elemento seleccionado del DOM.

Ejercicio Práctico

Ejercicio

  1. Crea un SVG con un rectángulo.
  2. Modifica el color de relleno del rectángulo a amarillo.
  3. Añade un borde azul al rectángulo.
  4. Añade un nuevo rectángulo al SVG con diferentes atributos.
  5. Elimina el rectángulo original.

Solución

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio Práctico</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500">
        <rect id="myRect" x="50" y="50" width="200" height="100" fill="blue"></rect>
    </svg>
    <script>
        // Modificar el color de relleno del rectángulo a amarillo
        d3.select("#myRect")
            .attr("fill", "yellow")
            .style("stroke", "blue") // Añadir un borde azul
            .style("stroke-width", "3px");

        // Añadir un nuevo rectángulo al SVG
        d3.select("svg")
            .append("rect")
            .attr("x", 300)
            .attr("y", 50)
            .attr("width", 150)
            .attr("height", 100)
            .attr("fill", "green");

        // Eliminar el rectángulo original
        d3.select("#myRect").remove();
    </script>
</body>
</html>

Conclusión

En esta sección, hemos aprendido cómo seleccionar y modificar elementos del DOM utilizando D3.js. Hemos cubierto cómo cambiar atributos, estilos, contenido de texto, y cómo añadir y eliminar elementos. Estos conceptos son fundamentales para crear visualizaciones dinámicas y personalizadas. En el próximo tema, exploraremos cómo vincular datos a elementos del DOM, lo que nos permitirá crear visualizaciones basadas en datos.

◄ Anterior
◄
Siguiente ►
►

D3.js: De Principiante a Avanzado

Módulo 1: Introducción a D3.js

Módulo 2: Trabajando con Selecciones

Módulo 3: Datos y Escalas

Módulo 4: Creando Visualizaciones Básicas

Módulo 5: Visualizaciones Avanzadas

Módulo 6: Interactividad y Animación

Módulo 7: Trabajando con Datos Reales

Módulo 8: Rendimiento y Optimización

Módulo 9: Mejores Prácticas y Técnicas Avanzadas

Módulo 10: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados