Menú

Funcions de l'API D3.js: tutorial amb exemples

d3 js api functions tutorial with examples

Proveu El Nostre Instrument Per Eliminar Problemes

Aquest tutorial explica diverses funcions de l'API D3.js per afegir funcions com ara la vinculació de dades, la unió, la càrrega i l'analització de dades, la interpolació, etc.:

D3.js és una biblioteca de visualització de dades JavaScript de codi obert que inclou diverses funcions de l'API que afegeix funcions interessants com ara unir dades, unir, carregar i analitzar dades externes en format CSV, XML i JSON, manipular números aleatoris, interpolació i text formatació i internacionalització juntament amb diverses funcions com ara animació, transició i formació de gràfics per a la visualització de dades.

el millor programari de còpia de DVD per a Mac

Podeu consultar els nostres tutorials anteriors sobre això sèrie d3 per obtenir més informació sobre les seves característiques, avantatges i requisits previs.

Funcions API a D3.js

Què aprendreu:

Enllaç de dades amb D3.js

Per tal de crear visualització de dades, com ara gràfics i gràfics, cal unir o unir dades amb un element DOM.

Les dades poden ser una matriu que és un contenidor que conté valors numèrics del mateix tipus, tal com es mostra a continuació.

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

El primer pas serà crear un objecte SVG, per tal de tenir un pla o un marc per crear visualització de dades de dades externes, l'element HTML es selecciona amb d3.select () i afegiu SVG que actua com a llenç afegint atributs com ara l'amplada i l'alçada del llenç.

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

El següent pas és la inserció de l’element SVG ‘g’ que actua com un grup que conté altres elements SVG.

svg.selectAll ('g')

A més, uneix o uneix dades a aquesta forma SVG adjunta amb canvas, mitjançant la funció .data (dades).

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

El següent pas és vincular les dades als elements DOM mitjançant el mètode .enter () a la funció .data (dades).

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

A més, afegiu la forma SVG perquè puguem fixar la forma al llenç.

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

A continuació es mostra un exemple d’enllaç de dades.

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'); Unir, carregar i analitzar dades a D3.js
La sortida es captura en forma gràfica de coordenades amb unió de dades

Per tal d’enllaçar les dades, que en el nostre cas, és una densitat de població prudent

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

La pantalla variable s’assigna a una àrea de dibuix adjuntant la forma SVG a l’element html, que és el cos en el nostre cas.

L'abast d'escala variable adopta la funció scaleLinear () amb paràmetres de domini i rang per tal de representar un gràfic per mostrar els valors de l'escala en un format gràfic.

.data (infoset) .enter () ajudarà a enllaçar el nostre conjunt de dades assignat a una variable Infoset.

S'afegeix text per tal de traçar els valors contra els rectangles de diferents longituds que corresponen als seus valors del conjunt de dades.

Unir, carregar i analitzar dades a D3.js

D3.js pot carregar dades externes o localment en variables de diferents tipus de fitxers i enllaçar aquestes dades amb elements DOM.

Els diferents formats de dades són CSV, JSON, TSV i XML, mentre que d3.csv (), d3.JSON (), d3.tsv () i d3.xml () són els mètodes respectius proporcionats per carregar fitxers de dades en diferents formats de fonts externes enviant una sol·licitud http a la URL especificada per carregar fitxers o dades de formats respectius, així com executar la funció de devolució de trucada amb els objectes de dades respectius analitzats.

configuració regional predeterminada
Les dades externes en diversos formats es poden mostrar com es mostra a la part anterior

La sintaxi per carregar el fitxer de dades CSV és la que es mostra a continuació.

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

# 1) El primer URL del paràmetre anterior és l'URL o la ruta del servidor del fitxer CSV, que és un fitxer extern que la funció d3.csv ha de carregar. en el nostre cas, ho és

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

# 2) El segon paràmetre és opcional

# 3) El tercer paràmetre és Callback, que és una funció que pot passar com a argument una altra funció, assegurant-se que s’executa un codi específic fins que ja s’hagi acabat d’executar un altre codi per als formats JSON, TSV i XML del fitxer, la funció d3.csv és substituït per d3.json, d3.tsv i d3.xml respectivament.

A continuació es mostra un exemple per analitzar dades externes.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () carregarà el fitxer CSV tal com es mostra més amunt.

Si s’obre al navegador Google Chrome, feu clic a F12 i l’actualització de la pàgina mostrarà el registre de la consola des del codi que en el nostre cas és console.log (dades), que mostrarà els valors del conjunt de dades, amb capçaleres de columna, nom_filma i any. es mostrarà des del fitxer CSV conservat a la ubicació del servidor.

Manipulació de números aleatoris a D3.js

d3: els mètodes API aleatoris retornen nombres aleatoris de diverses distribucions de probabilitat, que és una funció matemàtica, que calcula les possibilitats d’aparició de diferents resultats possibles.

Aquestes funcions utilitzen principalment les matemàtiques. funció aleatòria de JavaScript que produeix nombres que se situen entre el nombre mínim i màxim de l'interval especificat, donant lloc a un número únic cada vegada que es fa la matemàtica. s'executa la funció aleatòria.

  • d3.aleatoriUniforme - Generar nombres aleatoris a partir d’una distribució uniforme. Per exemple. d3.randomUniform (1, 2) (): retornarà nombres aleatoris inclosos 1 i menys de 2.
  • d3.aleatoriNormal - Generar números aleatoris a partir d’una distribució normal, Per exemple. d3.randomNormal (1, 2) (): retornarà un nombre enter que es troba entre un valor mínim especificat i un valor màxim.
  • d3.randomLogNormal - Genereu nombres aleatoris a partir d'una distribució log-normal i el valor esperat serà el valor del logaritme natural de la variable aleatòria.
  • d3.randomBates - Generar nombres aleatoris a partir d’una distribució de Bates, amb variables independents.
  • d3.randomIrwinHall - Generar números aleatoris a partir d’una distribució Irwin – Hall.
  • d3.randomExponential - Generar nombres aleatoris a partir d’una distribució exponencial.

Exemple de funcions aleatòries a 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)()+'

');

Es mostra la sortida dels mètodes aleatoris d3

Interpolació en D3.js

Els mètodes API aplicats per interpolar entre dos valors aleatoris dependran del tipus de valor final b, la sintaxi general és d3.interpola (a, b). A continuació es mostra una taula que llista els tipus de dades de valor final b i el mètode o funció corresponent que canviarà segons el tipus de dades.

Tipus de valor final bNom del mètode utilitzat
Si b és una matriu genèricainterpolateArray ()
Si b és booleà, nul o indefinitS'utilitzarà la constant b
Si b és un nombreinterpolateNumber ()
Si b és un color o una cadena que fa referència al colorinterpolateRgb ()
Si b és una datainterpolateDate ()
Si b és una cadenainterpolateString ()
Si b és una matriu de números mecanografiatsinterpolateNumberArray ()
Si b fa referència al nombreinterpolateNumber ()
D'una altra manerainterpolateObject ()

L'exemple següent explica:

  • Funció d3.interpolateNumber () amb 10 com a valor inicial i valor final com 20, els valors visualitzats van des del valor inicial 10 fins al valor final 20 per a interpolar paràmetres des de (0.0) fins a (0.5) fins a (1.0)
  • Funció d3.interpolateRgb () per a dos noms de colors diferents que resulten en valors rgb ('r', 'g', 'b') corresponents com a resultat, per a interpolar paràmetres des de (0.0) fins a (0.5) fins a (1.0)
  • La funció d3.interpolateDate () per a dues dates diferents en el format 'aaaa-mm-dd hh: mm: ss', mostrarà les dates compreses entre l'interval de dates anterior, per a interpolar paràmetres des de (0.0) fins a (1.0)

A continuació es mostra un exemple d’interpolació de nombres, colors i dates entre l’interval.

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)+ '

');

Interpolació a D3.js per a nombres i colors

Format de text i internacionalització amb D3.js

El format de text i la localització es poden aconseguir en D3.js amb funcions de format de número, format de data i configuració regional, tal com s’explica a continuació amb exemples.

D3 - local ()

d3.locale (definició), retornarà la configuració regional específica de la definició; per defecte, la definició de configuració regional és l’anglès dels EUA per a d3.locale (definició),

com escriure el selector CSS en seleni

A continuació es detallen les propietats del format de número per a la definició de configuració regional.

  • decimal: El punt decimal se sol aplicar en monedes com 25,75 ( Per exemple. '.').
  • milers: Mil és un identificador o un separador que s’utilitza com a coma després de mil valors com 2.475 ( Per exemple. ',').
  • agrupació: El grup de matriu per a cada grup i la mida es pot comprovar mitjançant Arrayname (5), on 5 és un índex i la mida de la matriu és de 6 membres.
  • moneda: Prefix i sufix per a les cadenes de divises ( Per exemple. ( '$', '')).
  • dateTime: El format de data i hora (% c) tindrà data i hora ( Per exemple. '% A% b% i% X% I').
  • data: La data (% x) ( Per exemple. '% M /% d /% Y') cadena de format al mes dia i any.
  • temps: El temps (% X) ( Per exemple. '% H:% M:% S') cadena de format en hores minuts i segons.
  • períodes: A.M. i P.M. equivalents ( Per exemple. ('AM PM')).
  • dies: Dies de la setmana, a partir de diumenge, en alfabets.
  • dies curts: Dies curts o noms abreujats com SUN, MON, etc. dels dies feiners, començant per diumenge.
  • mesos: Els noms complets del mes són octubre (a partir de gener).
  • mesos curts: Mesos curts o noms abreujats com JAN, FEB, MAR, etc. dels mesos (a partir de gener).

Tots els paràmetres explicats anteriorment es mostren com a variables amb els seus valors respectius a la imatge següent.

La configuració regional predeterminada és en_US, la configuració regional russa (ru_RU) té constants de data, hora i interval.

D3.format

d3.format de la biblioteca JavaScript pren un número com a argument d’entrada, la sintaxi és d3.format (especificador), per tal de transformar nombres s’utilitza d3.format.

A continuació es mostra un exemple d’aplicació de format basat en d3.

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); });
El format s'ha aplicat per al número i la moneda mitjançant d3.format

Modificació amb formats de data amb D3.js

Format de temps mitjançant la biblioteca D3.js, on es pot aplicar d3.timeParse amb caràcters comodins, és a dir, expressions regulars que ajuden a convertir el format d’hora d’entrada al format desitjat.

A continuació es mostra un exemple del format relacionat amb l’hora i la data.

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()) +'

');

Explicació del format de data i hora

Conclusió

En aquest tutorial, hem tractat tots els mètodes essencials restants de D3.js, com ara la vinculació de dades, on les dades en forma de matriu i unió, càrrega i analització de dades estan en format CSV, JSON i XML.

També es va discutir la manipulació mitjançant números aleatoris i el mètode interpolat per tal de visualitzar grups de dades en gràfics o gràfics, i donar format al text i la localització mitjançant mètodes d3.locale per a números, data, hora i diferents monedes locals.

Lectura recomanada

^