D3.js: unión de datos

La unión de datos es otro concepto importante en D3.js. Funciona junto con las selecciones y nos permite manipular el documento HTML con respecto a nuestro conjunto de datos (una serie de valores numéricos). De forma predeterminada, D3.js otorga al conjunto de datos la máxima prioridad en sus métodos y cada elemento del conjunto de datos corresponde a un elemento HTML. Este capítulo explica en detalle las uniones de datos.

¿Qué es una unión de datos?

La unión de datos nos permite inyectar, modificar y eliminar elementos (elemento HTML y elementos SVG incrustados) basados en el conjunto de datos en el documento HTML existente. De forma predeterminada, cada elemento de datos en el conjunto de datos corresponde a un elemento (gráfico) en el documento.

A medida que cambia el conjunto de datos, el elemento correspondiente también se puede manipular fácilmente. La unión de datos crea una relación cercana entre nuestros datos y los elementos gráficos del documento. La unión de datos hace que la manipulación de los elementos basados en el conjunto de datos sea un proceso muy simple y fácil.

¿Cómo funciona la unión de datos?

El propósito principal de la combinación de datos es mapear los elementos del documento existente con el conjunto de datos dado. Crea una representación virtual del documento con respecto al conjunto de datos dado y proporciona métodos para trabajar con la representación virtual. Consideremos un conjunto de datos simple como se muestra a continuación.

[10, 20, 30, 25, 15]

El conjunto de datos tiene cinco elementos y, por lo tanto, se puede asignar a cinco elementos del documento. Vamos a mapearlo alli elemento del siguiente documento utilizando el método selectAll () del selector y el método data () de unión de datos.

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

Código D3.js

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

Ahora, hay cinco elementos virtuales en el documento. Los dos primeros elementos virtuales son los dosli elemento definido en el documento como se muestra a continuación.

1. li - 10
2. li - 20

Podemos usar todos los métodos de modificación de elementos del selector como attr(), style(), text(), etc., para los dos primeros li Como se muestra abajo.

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

La función en el método text () se usa para obtener el lielementos mapeados datos. Aquí,d representa 10 por primera vez li elemento y 20 por segundo li elemento.

Los siguientes tres elementos se pueden asignar a cualquier elemento y se puede hacer usando el método enter () de la combinación de datos y el método append () del selector. El método enter () da acceso a los datos restantes (que no se asignan a los elementos existentes) y el método append () se utiliza para crear un nuevo elemento a partir de los datos correspondientes. Vamos a crearlitambién para los elementos de datos restantes. El mapa de datos es el siguiente:

3. li - 30
4. li - 25
5. li - 15

El código para crear un nuevo elemento li es el siguiente:

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

La unión de datos proporciona otro método llamado como exit() method para procesar los elementos de datos eliminados dinámicamente del conjunto de datos como se muestra a continuación.

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

Aquí, hemos eliminado el cuarto elemento del conjunto de datos y su li correspondiente usando los métodos exit () y remove ().

El código completo es el siguiente:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

El resultado del código anterior será el siguiente:

↰ Previous page Next page ↱