DC.js - Introdução ao D3.js

D3.js é uma biblioteca JavaScript usada para criar visualizações interativas no navegador. A biblioteca D3 nos permite manipular elementos de uma página da web no contexto de um conjunto de dados. Esses elementos podem ser HTML, SVG ou Canvas e podem ser introduzidos, removidos ou editados de acordo com o conteúdo do conjunto de dados. É uma biblioteca para manipular objetos DOM. D3.js pode ser uma ajuda valiosa na exploração de dados. Dá a você controle sobre a representação de seus dados e permite adicionar interatividade de dados.

D3.js é um dos frameworks principais quando comparado a outras bibliotecas. Isto é porque; funciona na web e em visualizações de dados e é de nível empresarial. Outro motivo é sua grande flexibilidade, que permite aos desenvolvedores em todo o mundo criar muitos gráficos avançados. Além disso, ele estendeu sua funcionalidade em grande medida.

Vamos entender os conceitos básicos de D3.js, que são os seguintes -

  • Selections
  • Junção de dados
  • SVG
  • Transition
  • Animation
  • API D3.js

Vamos entender cada um desses conceitos em detalhes.

Seleções

As seleções são um dos conceitos centrais do D3.js. É baseado no conceito de seletor CSS. Aqueles que já usaram e estão cientes do JQuery podem entender facilmente as seleções. Ele nos permite selecionar o DOM com base em seletores CSS e, em seguida, fornecer opções para modificar ou anexar e remover os elementos do DOM.

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 dataset a maior prioridade em seus métodos e cada item no dataset corresponde a um elemento HTML.

SVG

SVG significa Scalable Vector Graphics. SVG é um formato gráfico vetorial baseado em XML. Ele oferece opções para desenhar diferentes formas, como linhas, retângulos, círculos, elipses, etc. Portanto, projetar visualizações com SVG oferece mais poder e flexibilidade.

Transformação

O SVG oferece opções para transformar um único elemento de forma SVG ou grupo de elementos SVG. A transformação SVG oferece suporte a Traduzir, dimensionar, girar e inclinar.

Transição

Transição é o processo de mudança de um estado para outro de um item. D3.js fornece um método transaction () para realizar a transição na página HTML.

Animação

D3.js suporta animação durante a transição. A animação pode ser feita com o uso adequado da transição. As transições são uma forma limitada de animação de quadro-chave com apenas dois quadros-chave:start e end. O quadro-chave inicial é normalmente o estado atual do DOM, e o quadro-chave final é um conjunto de atributos, estilos e outras propriedades que você especifica. As transições são adequadas para fazer a transição para uma nova visualização sem um código complicado que depende da visualização inicial.

API D3.js

Vamos entender alguns dos métodos importantes da API D3.js em breve.

API de coleções

Uma coleção é simplesmente um objeto que agrupa vários elementos em uma única unidade. Também é chamado de contêiner. Ele contém objetos, mapas, conjuntos e ninhos.

API Paths

Os caminhos são usados ​​para desenhar retângulos, círculos, elipses, polilinhas, polígonos, linhas retas e curvas. Os caminhos SVG representam o contorno de uma forma que pode ser traçada, preenchida, usada como um caminho de recorte ou qualquer combinação dos três.

API Axis

D3.js fornece funções para desenhar eixos. Um eixo é feito de linhas, marcas e rótulos. Um eixo usa escala, portanto, cada eixo precisará receber uma escala para trabalhar.

API de zoom

O zoom ajuda a dimensionar seu conteúdo. Você pode focar em uma determinada região usando a abordagem clicar e arrastar.

API de valores separados por delimitador

Um delimitador é uma sequência de um ou mais caracteres usados ​​para especificar o limite entre regiões separadas e independentes em texto simples ou outros dados. Um delimitador de campo é uma sequência de valores separados por vírgula. Resumindo, os valores separados por delimitadores são Valores separados por vírgula (CSV) ou Valores separados por tabulação (TSV).