D3.js - Data Join

A junção de dados é outro conceito importante no D3.js. Ele funciona junto com as seleções e nos permite manipular o documento HTML em relação ao nosso conjunto de dados (uma série de valores numéricos). Por padrão, D3.js dá ao conjunto de dados a maior prioridade em seus métodos e cada item no conjunto de dados corresponde a um elemento HTML. Este capítulo explica as junções de dados em detalhes.

O que é uma junção de dados?

A junção de dados nos permite injetar, modificar e remover elementos (elemento HTML, bem como elementos SVG incorporados) com base no conjunto de dados no documento HTML existente. Por padrão, cada item de dados no conjunto de dados corresponde a um elemento (gráfico) no documento.

Conforme o conjunto de dados muda, o elemento correspondente também pode ser facilmente manipulado. A junção de dados cria um relacionamento próximo entre nossos dados e os elementos gráficos do documento. A junção de dados torna a manipulação dos elementos com base no conjunto de dados um processo muito simples e fácil.

Como funciona a junção de dados?

O objetivo principal da junção de dados é mapear os elementos do documento existente com o conjunto de dados fornecido. Ele cria uma representação virtual do documento em relação ao conjunto de dados fornecido e fornece métodos para trabalhar com a representação virtual. Vamos considerar um conjunto de dados simples, conforme mostrado abaixo.

[10, 20, 30, 25, 15]

O conjunto de dados possui cinco itens e, portanto, pode ser mapeado para cinco elementos do documento. Vamos mapear para oli elemento do seguinte documento usando o método selectAll () do seletor e o método data () da junção de dados.

HTML

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

Código D3.js

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

Agora, existem cinco elementos virtuais no documento. Os primeiros dois elementos virtuais são os doisli elemento definido no documento conforme mostrado abaixo.

1. li - 10
2. li - 20

Podemos usar todos os métodos de modificação de elementos do seletor, como attr(), style(), text(), etc., para os dois primeiros li como mostrado abaixo.

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

A função no método text () é usada para obter o lielementos mapeados de dados. Aqui,d representam 10 para o primeiro li elemento e 20 para o segundo li elemento.

Os próximos três elementos podem ser mapeados para quaisquer elementos e isso pode ser feito usando o método enter () da junção de dados e o método append () do seletor. O método enter () dá acesso aos dados restantes (que não são mapeados para os elementos existentes) e o método append () é usado para criar um novo elemento a partir dos dados correspondentes. Vamos criarlipara os demais itens de dados também. O mapa de dados é o seguinte -

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

O código para criar um novo elemento a li é o seguinte -

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; });

A junção de dados fornece outro método chamado de exit() method para processar os itens de dados removidos dinamicamente do conjunto de dados, conforme mostrado abaixo.

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

Aqui, removemos o quarto item do conjunto de dados e seu li correspondente usando os métodos exit () e remove ().

O código completo é o seguinte -

<!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>

O resultado do código acima será o seguinte -

↰ Previous page Next page ↱