Menu

Funções da API D3.js - Tutorial com exemplos

d3 js api functions tutorial with examples

Experimente Nosso Instrumento Para Eliminar Problemas

Este tutorial explica várias funções da API D3.js para adicionar recursos, como vinculação de dados, junção, carregamento e análise de dados, interpolação, etc:

D3.js é uma biblioteca de visualização de dados JavaScript de código aberto que compreende várias funções de API que adiciona recursos interessantes, como vinculação de dados, junção, carga e análise de dados externos em formato CSV, XML e JSON, manipulação de números aleatórios, interpolação e texto formatação e internacionalização junto com várias funções, como animação, transição e formação de gráficos para visualização de dados.

como inverter a ordem de um array em java

Você pode consultar nossos tutoriais anteriores sobre este d3 series saber mais sobre seus recursos, benefícios e pré-requisitos.

Funções de API em D3.js

O que você aprenderá:

Vinculação de dados com D3.js

Para criar a visualização de dados, como tabelas e gráficos, é necessário vincular ou juntar dados a um elemento DOM.

Os dados podem ser uma matriz que é um contêiner que contém valores numéricos dos mesmos tipos, conforme exibido abaixo.

var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)

O primeiro passo será a criação de um objeto SVG, a fim de ter um plano ou uma estrutura para construir a visualização de dados de dados externos, o elemento HTML é selecionado com d3.select () e anexa um SVG que atua como uma tela adicionando atributos como largura e altura da tela.

var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)

A próxima etapa é a inserção do elemento SVG 'g', que atua como um grupo que contém outros elementos SVG.

svg.selectAll ('g')

Além disso, vincule ou junte dados a esta forma SVG anexada ao canvas, usando a função .data (dados).

svg.selectAll ('g').data(data)

A próxima etapa é vincular os dados aos elementos DOM usando o método .enter () para a função .data (dados).

svg.selectAll ('g').data(data).enter()

Além disso, anexe a forma SVG para que possamos anexar a forma à tela.

svg.selectAll ('g') . data(data).enter().append('g')

Um exemplo de vinculação de dados é fornecido abaixo.

var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); Juntar, carregar e analisar dados em D3.js
A saída é capturada na forma gráfica de Coordenadas com vinculação de dados

A fim de vincular os dados, que em nosso caso, é uma densidade populacional do continente

var infoset = (59,5, 17,2, 9,6, 7,6, 5,5, 0,5)

A variável screen é atribuída a uma área de desenho anexando a forma SVG ao elemento html, que é o corpo em nosso caso.

A extensão da escala variável usa a função scaleLinear () com parâmetros de domínio e intervalo para traçar um gráfico para exibir valores na escala em um formato gráfico.

.data (infoset) .enter () ajudará a vincular nosso conjunto de dados atribuído a uma variável Infoset.

O texto é anexado para representar os valores em relação aos retângulos de diferentes comprimentos correspondentes aos seus valores no conjunto de dados.

Unir, carregar e analisar dados em D3.js

O D3.js pode carregar dados externos ou localmente em variáveis ​​de diferentes tipos de arquivos e vincular esses dados a elementos DOM.

Diferentes formatos de dados são CSV, JSON, TSV e XML, enquanto d3.csv (), d3.JSON (), d3.tsv () e d3.xml () são os respectivos métodos fornecidos para carregar arquivos de dados em diferentes formatos de fontes externas enviando uma solicitação http para a url especificada para carregar arquivos ou dados dos respectivos formatos, bem como executar a função de retorno de chamada com os respectivos objetos de dados analisados.

localidade padrão
Dados externos em vários formatos podem ser exibidos como mostrado acima

A sintaxe para carregar o arquivo de dados CSV é fornecida a seguir.

d3.csv (url (, row, callback));

# 1) O primeiro parâmetro url acima é o URL ou caminho do servidor do arquivo csv, que é um arquivo externo a ser carregado pela função d3.csv. no nosso caso, é

http: // localhost: 8080 / examples / movie_published.csv

#dois) O segundo parâmetro é opcional

# 3) O terceiro parâmetro é Callback, que é uma função que pode ser passada como um argumento por outra função, garantindo que o código específico seja executado até que outro código já tenha terminado de ser executado para os formatos JSON, TSV e XML do arquivo, a função d3.csv é substituído por d3.json, d3.tsv e d3.xml respectivamente.

Um exemplo para analisar dados externos é fornecido abaixo.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () carregará o arquivo CSV conforme exibido acima.

Se aberto no navegador Google Chrome, clique em F12 e a atualização da página exibirá o log do console a partir do código que, em nosso caso, é console.log (dados), que exibirá os valores do conjunto de dados, com cabeçalhos de coluna, movie_name e ano. ser exibido a partir do arquivo CSV mantido no local do servidor.

Manipulando números aleatórios em D3.js

d3 - métodos API aleatórios retornam números aleatórios de várias distribuições de probabilidade, que é uma função matemática que calcula as chances de ocorrência de diferentes resultados possíveis.

Essas funções usam principalmente o Math. função aleatória do JavaScript que produz números que ficam entre o mínimo e um número máximo do intervalo especificado, resulta em um número único sempre que o Math. função aleatória é executada.

  • d3.randomUniform - Gerar números aleatórios de uma distribuição uniforme. Por exemplo. d3.randomUniform (1, 2) () - retornará números aleatórios inclusive de 1 e menos de 2.
  • d3.randomNormal - Gere números aleatórios de uma distribuição normal, Por exemplo. d3.randomNormal (1, 2) () - retornará um número inteiro que está entre um valor mínimo especificado e valores máximos.
  • d3.randomLogNormal - Gere números aleatórios de uma distribuição log-normal e o valor esperado será o valor do logaritmo natural para a variável aleatória.
  • d3.randomBates - Gerar números aleatórios a partir de uma distribuição de Bates, com variáveis ​​independentes.
  • d3.randomIrwinHall - Gere números aleatórios de uma distribuição Irwin-Hall.
  • d3.randomExponential - Gere números aleatórios de uma distribuição exponencial.

Exemplo de funções aleatórias em d3

Random Functions in d3

Random Functions in d3

document.write(d3.randomUniform(1, 2)() +'

'); document.write(d3.randomNormal(1, 2)()+'

'); document.write(d3.randomLogNormal(1, 2)()+'

'); document.write(d3.randomBates(1, 2)()+'

'); document.write(d3.randomIrwinHall(1, 2)()+'

'); document.write(d3.randomExponential(1, 2)()+'

');

A saída dos métodos aleatórios d3 é exibida

Interpolação em D3.js

Os métodos da API aplicados para interpolar entre dois valores aleatórios dependerão do tipo do valor final b, a sintaxe geral é d3.interpolar (a, b). A seguir, está uma tabela que lista os tipos de dados do valor final b e o método ou função correspondente que mudará de acordo com o tipo de dados.

Tipo de valor final bNome do método usado
Se b é uma matriz genéricainterpolateArray ()
Se b for booleano, nulo ou indefinidoA constante b será usada
Se b é um númerointerpolateNumber ()
Se b é uma cor ou string que se refere à corinterpolateRgb ()
Se b é uma datainterpolateDate ()
Se b é uma cordainterpolateString ()
Se b é uma matriz digitada de númerosinterpolateNumberArray ()
Se b está se referindo ao númerointerpolateNumber ()
De outra formainterpolateObject ()

O exemplo abaixo explica:

  • função d3.interpolateNumber () com 10 como valor inicial e valor final como 20, os valores exibidos variam do valor inicial 10 ao valor final 20 para os parâmetros interpolar de (0,0) a (0,5) até (1,0)
  • função d3.interpolateRgb () para dois nomes de cores diferentes que resultam em valores rgb ('r', 'g', 'b' correspondentes como resultado, para parâmetros interpolar de (0,0) a (0,5) até (1,0)
  • A função d3.interpolateDate () para duas datas diferentes no formato ‘aaaa-mm-dd hh: mm: ss’, exibirá datas entre o intervalo de datas acima, para interpolar parâmetros de (0,0) a (1,0)

Um exemplo de interpolação de números, cores e datas entre o intervalo é fornecido abaixo.

Interpolate Numbers, Colors and Dates

var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + '

'); document.write(inpolat(0.2)+ '

'); document.write(inpolat(0.5) + '

'); document.write(inpolat(1.0)+ '

'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '

'); document.write(inpolcolrs(0.2)+ '

'); document.write(inpolcolrs(0.5)+ '

'); document.write(inpolcolrs(0.8)+ '

'); document.write(inpolcolrs(1.0)+ '

'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '

'); document.write(inpoldates(0.2)+ '

'); document.write(inpoldates(0.5)+ '

'); document.write(inpoldates(0.8)+ '

'); document.write(inpoldates(1.0)+ '

');

Interpolação em D3.js para números e cores

Formatação de texto e internacionalização com D3.js

A formatação e localização do texto podem ser obtidas em D3.js com formato de número, formato de data e funções de localidade, conforme explicado abaixo com exemplos.

D3 - local ()

d3.locale (definição), retornará o local específico para a definição, por padrão, a definição do local é o inglês dos EUA para d3.locale (definição),

geração de dados de teste em teste de software

As propriedades de formatação de número para a definição de localidade estão listadas abaixo.

  • decimal: A vírgula decimal é geralmente aplicada em moedas como 25,75 ( Por exemplo. '.').
  • milhares: Mil é um identificador ou separador que é usado como vírgula após mil valores como 2.475 ( Por exemplo. ',').
  • agrupamento: Grupo de Array para cada grupo e o tamanho podem ser verificados usando Arrayname (5), onde 5 é um índice e o tamanho do array é 6 membros.
  • moeda: Prefixo e sufixo para as strings de moeda ( Por exemplo. ('$', '')).
  • data hora: O formato de data e hora (% c) terá data e hora ( Por exemplo. '% A% b% e% X% Y').
  • encontro: A data (% x) ( Por exemplo. “% M /% d /% Y”) string de formato em Mês, Dia e Ano.
  • Tempo: A hora (% X) ( Por exemplo. “% H:% M:% S”) string de formato em horas, minutos e segundos.
  • períodos: A AM localidade e P.M. equivalentes ( Por exemplo. ('MANHÃ TARDE')).
  • dias: Dias da semana, começando no domingo, em alfabetos.
  • shortDays: Dias curtos ou nomes abreviados como SUN, MON, etc. dos dias da semana, começando com domingo.
  • meses: Os nomes completos do mês são outubro (começando com janeiro).
  • shortMonths: Meses curtos ou nomes abreviados como JAN, FEV, MAR, etc. dos meses (começando com janeiro).

Todos os parâmetros explicados acima são exibidos como variáveis ​​com seus respectivos valores na imagem a seguir.

A localidade padrão é en_US, a localidade russa (ru_RU) tem constantes de Data, Hora e Intervalo.

D3.format

d3.format da biblioteca JavaScript recebe um número como argumento de entrada, a sintaxe é d3.format (especificador), para transformar números, d3.format é usado.

Um exemplo de aplicação de formato baseado em d3 é fornecido abaixo.

Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });
Formatação aplicada para número e moeda usando d3.format

Modificando com formatos de data com D3.js

Formatação de hora usando a biblioteca D3.js, onde d3.timeParse pode ser aplicado com caracteres curinga, ou seja, expressão regular que ajuda a converter o formato de hora de entrada para o formato desejado.

Um exemplo do formato relacionado a hora e data é fornecido abaixo.

body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +'

'); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'

'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'

'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'

'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'

'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'

');

Explicação do formato de data e hora

Conclusão

Neste tutorial, cobrimos todos os métodos essenciais restantes do D3.js, como vinculação de dados, em que os dados na forma de uma matriz e junção, carregamento e análise de dados estão no formato CSV, JSON e XML.

Também discutimos a manipulação usando números aleatórios e método de interpolar para visualizar grupos de dados em tabelas ou gráficos e formatar texto e localização usando métodos d3.locale para números, data, hora e diferentes moedas locais.

Leitura recomendada

^