Menu

Fonctions de l'API D3.js - Tutoriel avec des exemples

  • Principal
  • Autre
  • Fonctions de l'API D3.js - Tutoriel avec des exemples

d3 js api functions tutorial with examples

Essayez Notre Instrument Pour Éliminer Les Problèmes

Ce tutoriel explique diverses fonctions de l'API D3.js pour ajouter des fonctionnalités telles que la liaison de données, la jointure, le chargement et l'analyse de données, l'interpolation, etc.:

D3.js est une bibliothèque de visualisation de données JavaScript open source qui comprend diverses fonctions d'API qui ajoute des fonctionnalités intéressantes telles que la liaison de données, la jointure, le chargement et l'analyse de données externes au format CSV, XML et JSON, la manipulation de nombres aléatoires, l'interpolation et le texte le formatage et l'internationalisation ainsi que diverses fonctions telles que l'animation, la transition et la formation de graphiques pour la visualisation des données.

comment installer subversion dans eclipse

Vous pouvez vous référer à nos tutoriels précédents à ce sujet série d3 pour en savoir plus sur ses fonctionnalités, ses avantages et ses prérequis.

Fonctions API dans D3.js

Ce que vous apprendrez:

Liaison de données avec D3.js

Afin de créer une visualisation de données telles que des graphiques et des graphiques, il est nécessaire de lier ou de joindre des données avec un élément DOM.

Les données peuvent être un tableau qui est un conteneur contenant des valeurs numériques du même type, comme indiqué ci-dessous.

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

La première étape sera de créer un objet SVG, afin d'avoir un plan ou un framework pour construire la visualisation des données de données externes, l'élément HTML est sélectionné avec d3.select () et ajouter SVG qui agit comme un canevas en ajoutant des attributs comme la largeur et la hauteur de la toile.

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

L’étape suivante est l’insertion de l’élément SVG «g» qui agit comme un groupe contenant d’autres éléments SVG.

svg.selectAll ('g')

De plus, liez ou joignez des données à cette forme SVG attachée avec un canevas, à l'aide de la fonction .data (data).

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

L'étape suivante consiste à lier les données aux éléments DOM à l'aide de la méthode .enter () à la fonction .data (data).

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

De plus, ajoutez une forme SVG afin que nous puissions attacher la forme au canevas.

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

Un exemple de liaison de données est donné ci-dessous.

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'); Joindre, charger et analyser des données dans D3.js
La sortie est capturée sous forme graphique de coordonnées avec liaison de données

Afin de lier les données, ce qui dans notre cas est une densité de population par continent

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

L'écran variable est affecté à une zone de dessin en attachant une forme SVG à l'élément html, qui est le corps dans notre cas.

La plage d'échelle variable utilise la fonction scaleLinear () avec des paramètres de domaine et de plage afin de tracer un graphique pour afficher les valeurs sur l'échelle dans un format graphique.

.data (infoset) .enter () aidera à lier notre ensemble de données affecté à une variable Infoset.

Le texte est ajouté afin de tracer les valeurs par rapport aux rectangles de différentes longueurs correspondant à leurs valeurs dans l'ensemble de données.

Joindre, charger et analyser des données dans D3.js

D3.js peut charger des données externes ou localement dans des variables de différents types de fichiers et lier ces données à des éléments DOM.

Différents formats de données sont CSV, JSON, TSV et XML, tandis que d3.csv (), d3.JSON (), d3.tsv () et d3.xml () sont les méthodes respectives fournies pour charger des fichiers de données dans différents formats à partir de sources externes en envoyant une requête http à l'URL spécifiée pour charger des fichiers ou des données de formats respectifs et exécuter la fonction de rappel avec des objets de données respectifs analysés.

paramètres régionaux par défaut
Les données externes dans divers formats peuvent être affichées comme indiqué ci-dessus

La syntaxe pour charger le fichier de données CSV est la suivante.

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

#1) Le premier paramètre url ci-dessus est l'URL ou le chemin du serveur du fichier csv qui est un fichier externe à charger par la fonction d3.csv. dans notre cas, c'est

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

#deux) Le deuxième paramètre est facultatif

# 3) Le troisième paramètre est Callback qui est une fonction qui peut être passée comme argument par une autre fonction, en s'assurant que le code spécifique est exécuté jusqu'à ce qu'un autre code ait déjà fini de s'exécuter pour les formats JSON, TSV et XML du fichier, la fonction d3.csv est remplacé par d3.json, d3.tsv et d3.xml respectivement.

Un exemple pour analyser des données externes est donné ci-dessous.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () chargera le fichier CSV comme indiqué ci-dessus.

S'il est ouvert dans le navigateur Google Chrome, cliquez sur F12 et l'actualisation de la page affichera le journal de la console à partir du code qui dans notre cas est console.log (data), qui affichera les valeurs de l'ensemble de données, avec les têtes de colonne, movie_name et year seront être affiché à partir du fichier CSV conservé à l'emplacement du serveur.

Manipuler des nombres aléatoires dans D3.js

d3 - Les méthodes API aléatoires renvoient des nombres aléatoires à partir de diverses distributions de probabilité, qui est une fonction mathématique, qui calcule les chances d'occurrences de différents résultats possibles.

Ces fonctions utilisent principalement Math. fonction aléatoire de JavaScript qui produit des nombres compris entre le nombre minimum et maximum de la plage spécifiée, il en résulte un nombre unique à chaque fois que le Math. la fonction aléatoire est exécutée.

  • d3.randomUniform - Générer des nombres aléatoires à partir d'une distribution uniforme. Par exemple. d3.randomUniform (1, 2) () - renvoie des nombres aléatoires compris entre 1 et moins de 2.
  • d3.randomNormal - Générer des nombres aléatoires à partir d'une distribution normale, Par exemple. d3.randomNormal (1, 2) () - renvoie un nombre entier compris entre une valeur minimale et une valeur maximale spécifiées.
  • d3.randomLogNormal - Générer des nombres aléatoires à partir d'une distribution log-normale, et la valeur attendue sera la valeur du logarithme naturel de la variable aléatoire.
  • d3.randomBates - Générer des nombres aléatoires à partir d'une distribution Bates, avec des variables indépendantes.
  • d3.randomIrwinHall - Générer des nombres aléatoires à partir d'une distribution Irwin – Hall.
  • d3.randomExponential - Générer des nombres aléatoires à partir d'une distribution exponentielle.

Exemple de fonctions aléatoires dans 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)()+'

');

La sortie des méthodes aléatoires d3 s'affiche

Interpolation dans D3.js

Les méthodes API appliquées pour interpoler entre deux valeurs aléatoires dépendront du type de la valeur de fin b, la syntaxe générale est d3.interpoler (a, b). Vous trouverez ci-dessous un tableau qui répertorie les types de données de la valeur finale b, et la méthode ou la fonction correspondante qui changera selon le type de données.

Type de valeur finale bNom de méthode utilisé
Si b est un tableau génériqueinterpolateArray ()
Si b est booléen, nul ou non définiLa constante b sera utilisée
Si b est un nombreinterpolateNumber ()
Si b est une couleur ou une chaîne faisant référence à la couleurinterpolateRgb ()
Si b est une dateinterpolateDate ()
Si b est une chaîneinterpolateString ()
Si b est un tableau typé de nombresinterpolateNumberArray ()
Si b fait référence au nombreinterpolateNumber ()
SinoninterpolateObject ()

L'exemple ci-dessous explique:

  • Fonction d3.interpolateNumber () avec 10 comme valeur de départ et valeur de fin comme 20, les valeurs affichées vont de la valeur de départ 10 à la valeur de fin 20 pour interpoler les paramètres de (0,0) à (0,5) jusqu'à (1,0)
  • Fonction d3.interpolateRgb () pour deux noms de couleurs différents qui aboutissent à des valeurs rgb («r», «g», «b») correspondantes, pour interpoler les paramètres de (0.0) à (0.5) jusqu'à (1.0)
  • La fonction d3.interpolateDate () pour deux dates différentes au format «aaaa-mm-jj hh: mm: ss», affichera les dates comprises entre la plage de dates ci-dessus, pour les paramètres d'interpolation de (0.0) à (1.0)

Un exemple d'interpolation pour les nombres, les couleurs et les dates entre la plage est donné ci-dessous.

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

');

Interpolation dans D3.js pour les nombres et les couleurs

Formatage de texte et internationalisation avec D3.js

Le formatage du texte et la localisation peuvent être réalisés dans D3.js avec les fonctions de format numérique, de date et de paramètres régionaux, comme expliqué ci-dessous avec des exemples.

D3 - local ()

d3.locale (définition), retournera les paramètres régionaux spécifiques à la définition, par défaut, la définition des paramètres régionaux est l'anglais américain pour d3.locale (définition),

vb script interview questions et réponses

Les propriétés de mise en forme des nombres pour la définition des paramètres régionaux sont répertoriées ci-dessous.

  • décimal: Le point décimal est généralement appliqué dans des devises telles que 25,75 ( Par exemple. '.').
  • milliers: Mille est un identifiant ou un séparateur qui est utilisé comme une virgule après mille valeurs comme 2475 ( Par exemple. ',').
  • regroupement: Le groupe de tableaux pour chaque groupe et la taille peuvent être vérifiés en utilisant Arrayname (5), où 5 est un index et la taille du tableau est de 6 membres.
  • devise: Préfixe et suffixe pour les chaînes de devises ( Par exemple. ('$', '')).
  • dateTime: Le format de la date et de l'heure (% c) aura la date et l'heure ( Par exemple. «% A% b% e% X% Y»).
  • Date: La date (% x) ( Par exemple. Chaîne de format «% m /% d /% Y») en mois, jour et année.
  • temps: L'heure (% X) ( Par exemple. «% H:% M:% S») chaîne de format en heures, minutes et secondes.
  • périodes: Le local A.M. et P.M. équivalents ( Par exemple. ('MATIN APRÈS-MIDI')).
  • jours: Jours de la semaine, en commençant par dimanche, en alphabets.
  • shortDays: Jours courts ou noms abrégés tels que SUN, MON, etc. des jours de la semaine, en commençant par dimanche.
  • mois: Les noms complets du mois sont octobre (à partir de janvier).
  • shortMonths: Mois courts ou noms abrégés tels que JAN, FEB, MAR, etc. des mois (commençant par janvier).

Tous les paramètres expliqués ci-dessus sont affichés sous forme de variables avec leurs valeurs respectives dans l'image suivante.

Les paramètres régionaux par défaut sont en_US, les paramètres régionaux russes (ru_RU) ont des constantes de date, d'heure et d'intervalle.

D3.format

d3.format de la bibliothèque JavaScript prend un nombre comme argument d'entrée, la syntaxe est d3.format (spécificateur), afin de transformer les nombres, d3.format est utilisé.

Un exemple d'application du format basé sur d3 est donné ci-dessous.

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); });
Mise en forme appliquée pour le nombre et la devise à l'aide de d3.format

Modification avec des formats de date avec D3.js

Formatage de l'heure à l'aide de la bibliothèque D3.js, où d3.timeParse peut être appliqué avec des caractères génériques, c'est-à-dire une expression régulière qui aide à convertir le format de l'heure d'entrée au format souhaité.

Un exemple du format lié à l'heure et à la date est donné ci-dessous.

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

');

Explication du format de la date et de l'heure

Conclusion

Dans ce didacticiel, nous avons couvert toutes les méthodes essentielles restantes de D3.js, telles que la liaison de données, où les données sous la forme d'un tableau et de la jointure, du chargement et de l'analyse des données sont au format CSV, JSON et XML.

Nous avons également discuté de la manipulation à l'aide de nombres aléatoires et d'une méthode d'interpolation afin de visualiser des groupes de données dans des graphiques ou des graphiques, et de mettre en forme le texte et la localisation à l'aide des méthodes d3.locale pour les nombres, la date, l'heure et différentes devises locales.

lecture recommandée

^