Menu

Funzioni API D3.js - Tutorial con esempi

d3 js api functions tutorial with examples

Prova Il Nostro Strumento Per Eliminare I Problemi

Questo tutorial spiega varie funzioni dell'API D3.js per aggiungere funzionalità come data binding, join, caricamento e analisi dei dati, interpolazione, ecc:

D3.js è una libreria di visualizzazione dei dati JavaScript open source che comprende varie funzioni API che aggiunge interessanti funzionalità come data binding, join, caricamento e analisi di dati esterni in formato CSV, XML e JSON, manipolazione di numeri casuali, interpolazione e testo formattazione e internazionalizzazione insieme a varie funzioni come animazione, transizione e formazione di grafici per la visualizzazione dei dati.

migliori società di ricerche di mercato per cui lavorare

Puoi fare riferimento ai nostri tutorial precedenti su questo serie d3 per saperne di più sulle sue caratteristiche, vantaggi e prerequisiti.

Funzioni API in D3.js

Cosa imparerai:

Associazione dati con D3.js

Per creare la visualizzazione dei dati come grafici e grafici, è necessario associare o unire i dati con un elemento DOM.

I dati possono essere un array che è un contenitore che contiene valori numerici dello stesso tipo, come mostrato di seguito.

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

Il primo passo sarà la creazione di un oggetto SVG, in modo da avere un piano o un framework per costruire la visualizzazione dei dati di dati esterni, si seleziona l'elemento HTML con d3.select () e si aggiunge SVG che funge da canvas aggiungendo attributi come larghezza e altezza per la 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)

Il passaggio successivo è l'inserimento dell'elemento SVG 'g' che agisce come un gruppo che contiene altri elementi SVG.

svg.selectAll ('g')

Inoltre, associa o unisci i dati a questa forma SVG allegata alla tela, utilizzando la funzione .data (dati).

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

Il passaggio successivo è associare i dati agli elementi DOM utilizzando il metodo .enter () alla funzione .data (dati).

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

Inoltre, aggiungi la forma SVG in modo da poter attaccare la forma alla tela.

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

Di seguito viene fornito un esempio di associazione dati.

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'); Unione, caricamento e analisi dei dati in D3.js
L'output viene catturato in forma grafica di Coordinate con data binding

Al fine di legare i dati, che nel nostro caso, è una densità di popolazione saggia continente

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

Lo schermo variabile viene assegnato a un'area di disegno allegando la forma SVG all'elemento html, che nel nostro caso è il corpo.

L'estensione della scala variabile accetta la funzione scaleLinear () con parametri di dominio e intervallo per tracciare un grafico per visualizzare i valori sulla scala in un formato grafico.

.data (infoset) .enter () aiuterà a legare il nostro set di dati assegnato a una variabile Infoset.

Il testo viene aggiunto per tracciare i valori rispetto ai rettangoli di diverse lunghezze corrispondenti ai loro valori nel set di dati.

Unione, caricamento e analisi dei dati in D3.js

D3.js può caricare dati esterni o localmente in variabili da diversi tipi di file e associare questi dati a elementi DOM.

Diversi formati di dati sono CSV, JSON, TSV e XML, mentre d3.csv (), d3.JSON (), d3.tsv () e d3.xml () sono i rispettivi metodi forniti per caricare file di dati in diversi formati da fonti esterne inviando una richiesta http all'URL specificato per caricare file o dati dei rispettivi formati, nonché eseguire la funzione di callback con i rispettivi oggetti dati analizzati.

locale predefinito
I dati esterni in vari formati possono essere visualizzati come mostrato sopra

La sintassi per caricare il file di dati CSV è la seguente.

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

# 1) Il primo URL del parametro sopra è l'URL o il percorso del server del file csv che è un file esterno che deve essere caricato dalla funzione d3.csv. nel nostro caso lo è

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

#Due) Il secondo parametro è facoltativo

# 3) Il terzo parametro è Callback che è una funzione che può essere passata come argomento da un'altra funzione, assicurandosi che il codice specifico venga eseguito fino a quando un altro codice non ha già terminato l'esecuzione per i formati JSON, TSV e XML del file, la funzione d3.csv è sostituito rispettivamente con d3.json, d3.tsv e d3.xml.

Di seguito viene fornito un esempio per analizzare i dati esterni.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () caricherà il file CSV come mostrato sopra.

Se aperto nel browser Google Chrome, fare clic su F12 e l'aggiornamento della pagina visualizzerà il log della console dal codice che nel nostro caso è console.log (data), che visualizzerà i valori dal set di dati, con le intestazioni di colonna, movie_name e year essere visualizzato dal file CSV conservato nella posizione del server.

Manipolazione di numeri casuali in D3.js

d3 - I metodi API casuali restituiscono numeri casuali da varie distribuzioni di probabilità, che è una funzione matematica, che calcola le possibilità di occorrenza di diversi risultati possibili.

Queste funzioni utilizzano principalmente la matematica. funzione casuale di JavaScript che produce numeri che rientrano tra il numero minimo e massimo dell'intervallo specificato, risulta in un numero univoco ogni volta che il Math. la funzione casuale viene eseguita.

  • d3.randomUniform - Genera numeri casuali da una distribuzione uniforme. Per esempio. d3.randomUniform (1, 2) () - restituirà numeri casuali comprensivi di 1 e minori di 2.
  • d3.randomNormal - Genera numeri casuali da una distribuzione normale, Per esempio. d3.randomNormal (1, 2) () - restituirà un numero intero compreso tra un valore minimo e un valore massimo specificato.
  • d3.randomLogNormal - Genera numeri casuali da una distribuzione log-normale e il valore atteso sarà il valore del logaritmo naturale per la variabile casuale.
  • d3.randomBates - Genera numeri casuali da una distribuzione Bates, con variabili indipendenti.
  • d3.randomIrwinHall - Genera numeri casuali da una distribuzione Irwin – Hall.
  • d3.randomExponential - Genera numeri casuali da una distribuzione esponenziale.

Esempio di funzioni casuali in 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)()+'

');

Viene visualizzato l'output dei metodi casuali d3

Interpolazione in D3.js

I metodi API applicati per l'interpolazione tra due valori casuali dipenderanno dal tipo di valore finale b, la sintassi generale è d3. interpolare (a, b). Di seguito è riportata una tabella che elenca i tipi di dati del valore finale b e il metodo o la funzione corrispondente che cambierà in base al tipo di dati.

Tipo di valore finale bNome del metodo utilizzato
Se b è un array genericointerpolateArray ()
Se b è booleano, null o undefinedVerrà utilizzata la costante b
Se b è un numerointerpolateNumber ()
Se b è un colore o una stringa che si riferisce al coloreinterpolateRgb ()
Se b è una datainterpolateDate ()
Se b è una stringainterpolateString ()
Se b è un array di numeri digitatointerpolateNumberArray ()
Se b si riferisce al numerointerpolateNumber ()
AltrimentiinterpolateObject ()

L'esempio seguente spiega:

  • d3.interpolateNumber () funzione con 10 come valore iniziale e valore finale come 20, i valori visualizzati vanno dal valore iniziale 10 al valore finale 20 per i parametri di interpolazione da (0.0) a (0.5) fino a (1.0)
  • Funzione d3.interpolateRgb () per due diversi nomi di colore che danno come risultato i corrispondenti valori rgb ('r', 'g', 'b'), per interpolare i parametri da (0.0) a (0.5) fino a (1.0)
  • La funzione d3.interpolateDate () per due date diverse nel formato 'aaaa-mm-gg hh: mm: ss', visualizzerà le date comprese nell'intervallo di date sopra, per i parametri di interpolazione da (0.0) a (1.0)

Di seguito viene fornito un esempio di interpolazione di numeri, colori e date nell'intervallo.

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

');

Interpolazione in D3.js per numeri e colori

Formattazione e internazionalizzazione del testo con D3.js

La formattazione del testo e la localizzazione possono essere ottenute in D3.js con le funzioni Formato numero, Formato data e locale come spiegato di seguito con esempi.

D3 – locale ()

d3.locale (definizione), restituirà la lingua specifica della definizione, per impostazione predefinita, la definizione della locale è l'inglese americano per d3.locale (definizione),

I dispositivi modello osi utilizzano ogni strato

Di seguito sono elencate le proprietà per la formattazione dei numeri per la definizione delle impostazioni locali.

  • decimale: Il punto decimale viene solitamente applicato in valute come 25,75 ( Per esempio. '.').
  • migliaia: Migliaia è un identificatore o un separatore utilizzato come virgola dopo mille valori come 2.475 ( Per esempio. ',').
  • raggruppamento: Group of Array per ogni gruppo e la dimensione può essere controllata utilizzando Arrayname (5), dove 5 è un indice e la dimensione dell'array è 6 membri.
  • moneta: Prefisso e suffisso per le stringhe di valuta ( Per esempio. ('$', '')).
  • appuntamento: Il formato di data e ora (% c) avrà data e ora ( Per esempio. '% A% b% e% X% Y').
  • Data: La data (% x) ( Per esempio. Stringa di formato '% m /% d /% Y') nel mese, giorno e anno.
  • tempo: Il tempo (% X) ( Per esempio. Stringa di formato '% H:% M:% S') in ore, minuti e secondi.
  • periodi: Il locale A.M. e P.M. equivalenti ( Per esempio. ('AM PM')).
  • giorni: Giorni della settimana, a partire dalla domenica, in alfabeti.
  • shortDays: Giorni brevi o nomi abbreviati come SUN, MON, ecc. Dei giorni feriali, a partire dalla domenica.
  • mesi: I nomi completi del mese sono ottobre (a partire da gennaio).
  • shortMonths: Mesi brevi o nomi abbreviati come JAN, FEB, MAR, ecc. Dei mesi (a partire da gennaio).

Tutti i parametri spiegati sopra vengono visualizzati come variabili con i rispettivi valori nell'immagine seguente.

La locale predefinita è en_US, la lingua russa (ru_RU) ha le costanti di data, ora e intervallo.

D3.format

d3.format dalla libreria JavaScript accetta un numero come argomento di input, la sintassi è d3.format (specificatore), per trasformare i numeri, viene utilizzato d3.format.

Di seguito viene fornito un esempio di applicazione del formato basato su 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); });
Formattazione applicata per numero e valuta utilizzando d3.format

Modifica con formati data con D3.js

Formattazione dell'ora utilizzando la libreria D3.js, dove d3.timeParse può essere applicato con caratteri jolly, ad esempio espressioni regolari che aiutano a convertire il formato dell'ora di input nel formato desiderato.

Di seguito viene fornito un esempio del formato relativo a Ora e 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()) +'

');

Spiegazione del formato data e ora

Conclusione

In questo tutorial, abbiamo coperto tutti i restanti metodi essenziali di D3.js come il data binding in cui i dati sotto forma di array e join, caricano e analizzano i dati sono in formato CSV, JSON e XML.

Abbiamo anche discusso la manipolazione utilizzando numeri casuali e il metodo di interpolazione per visualizzare gruppi di dati in grafici o grafici e formattare testo e localizzazione utilizzando i metodi d3.locale per numeri, data, ora e diverse valute locali.

Lettura consigliata

^