D3 js-last

Copy Right © DSI GROUP
D3.js
Récapitulatifs des Fonctionnalités
MOHAMED BOUHAMED COPY RIGHT @ DSI GROUP
1
Mohamed BOUHAMED DSI GROUP Mai 2018

Table des matières
Qu'est-ce que D3.js :...................................................................................................3
Introduction.................................................................................................................3
Exemple et Fonctionnalités :.......................................................................................3
Sélections :..............................................................................................................3
Propriétés dynamiques :..........................................................................................4
Les entrées sorties :.................................................................................................6
Transformation non représentative :.......................................................................7
Transitions :.............................................................................................................8
2

Data-Driven Documentations
Qu'est-ce que D3.js :
D3.js est une bibliothèque JavaScript pour manipuler des documents basés sur des données.
D3 vous aide à donner vie aux données en utilisant HTML5, SVG et CSS.
L'accent mis par D3 sur les standards web vous donne toutes les capacités des navigateurs modernes sans
vous attacher à un framework propriétaire, combinant de puissants composants de visualisation et une
approche basée sur les données pour la manipulation DOM ('Document Object Model : La structure d'une
page web').
Introduction
D3 vous permet de lier des données arbitraires à un DOM (Document Object Model), puis d'appliquer des
transformations pilotées par les données au document. Par exemple, vous pouvez utiliser D3 pour générer
une table HTML à partir d'un tableau de nombres.
Ou, utilisez les mêmes données pour créer un graphique à barres SVG ('sequel graphic visualisation')
interactif avec des transitions et des interactions en douceur.
D3 une manipulation efficace des documents basés sur les données. Cela évite la représentation
propriétaire et offre une flexibilité extraordinaire, exposant toutes les fonctionnalités des standards Web
tels que HTML, SVG et CSS. Avec un minimum de frais généraux, D3 est extrêmement rapide, prenant
en charge de grands ensembles de données et des comportements dynamiques pour l'interaction et
l'animation. Le style fonctionnel de D3 permet la réutilisation de code à travers une collection diverse de
modules officiels et développés par la communauté.
Exemple et Fonctionnalités :
Sélections :
La modification de documents à l'aide de l'API DOM du W3C est fastidieuse : les noms de méthodes sont
verbeux, et l'approche impérative requiert une itération manuelle et une comptabilité de l'état temporaire.
Par exemple, pour modifier la couleur du texte des éléments de paragraphe.
3

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++)
{ var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}
D3 utilise une approche déclarative, opérant sur des ensembles arbitraires de nœuds appelés sélections.
Par exemple, vous pouvez réécrire la boucle ci-dessus comme suit :
d3.selectAll("p").style("color", "white");
Pourtant, vous pouvez toujours manipuler des nœuds individuels au besoin :
d3.select("body").style("background-color", "black");
Les sélecteurs sont défnis par l'API W3C Selectors et pris en charge de manière
native par les navigateurs modernes. Les exemples ci-dessus sélectionnent les
noeuds par nom de tag ("p" et "body", respectivement). Les éléments peuvent être
sélectionnés en utilisant une variété de prédicats, y compris le confnement, les
valeurs d'attribut, la classe et l'ID.
D3 fournit de nombreuses méthodes pour la mutation de nœuds : défnition
d'attributs ou de styles enregistrement d'auditeurs d’événements ajouter,
supprimer ou trier des nœuds, et changer le contenu HTML ou texte. Ceux-ci
suffisent pour la grande majorité des besoins.
L'accès direct au DOM sous-jacent est également possible, car chaque sélection D3
est simplement un tableau de nœuds.
Propriétés dynamiques :
Les lecteurs familiers avec d'autres frameworks DOM tels que jQuery doivent
immédiatement reconnaître les similitudes avec D3.
4

Pourtant, les styles, attributs et autres propriétés peuvent être spécifés en tant que
fonctions de données dans D3, et pas seulement des constantes simples.
Malgré leur apparente simplicité, ces fonctions peuvent être étonnamment
puissantes, La fonction d3.geoPath, par exemple, projette des coordonnées
géographiques dans des données de chemin SVG.
D3 fournit de nombreuses fonctions réutilisables intégrées et des fabriques de
fonctions, telles que des primitives graphiques pour les diagrammes à secteurs,
linéaires et sectoriels.
Par exemple, pour colorier aléatoirement des paragraphes :
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
Pour alterner les nuances de gris pour les nœuds pairs et impairs :
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});
Les propriétés calculées font souvent référence à des données liées. Les données
sont spécifées sous la forme d'un tableau de valeurs et chaque valeur est
transmise en tant que premier argument (d) aux fonctions de sélection.
Avec l'index de jointure par défaut, le premier élément du tableau de données est
transmis au premier nœud de la sélection, le deuxième élément au second nœud,
etc.
Par exemple, si vous liez un tableau de nombres à des éléments de paragraphe,
vous pouvez utiliser ces nombres pour calculer des tailles de polices dynamiques :
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
5

Une fois les données liées au document, vous pouvez omettre l'opérateur de
données, D3 récupérera les données précédemment liées. Cela vous permet de
recalculer les propriétés sans relier.
Les entrées sorties :
En utilisant les sélections d'entrée et de sortie de D3, vous pouvez créer de
nouveaux noeuds pour les données entrantes et supprimer les noeuds sortants dont
vous n'avez plus besoin.
Lorsque les données sont liées à une sélection, chaque élément du tableau de
données est associé au nœud correspondant de la sélection.
S'il y a moins de nœuds que de données, les éléments de données supplémentaires
forment la sélection d'entrée, que vous pouvez instancier en l'ajoutant à la sélection
d'entrée. Par exemple :
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
Les nœuds de mise à jour sont la sélection par défaut, le résultat de l'opérateur de
données. Ainsi, si vous oubliez les sélections d'entrée et de sortie, vous ne
sélectionnez automatiquement que les éléments pour lesquels il existe des données
correspondantes.
Un modèle commun consiste à décomposer la sélection initiale en trois parties : les
nœuds de mise à jour à modifer, les nœuds entrants à ajouter et les nœuds
sortants à supprimer.
// Update…
var p = d3.select("body")
.selectAll("p")
6

.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
P.exit().remove();
En gérant ces trois cas séparément, vous spécifez précisément quelles opérations
s'exécutent sur quels noeuds.
Cela améliore les performances et offre un meilleur contrôle sur les transitions.
Par exemple, avec un graphique à barres, vous pouvez initialiser l'entrée de barres
à l'aide de l'ancienne échelle, puis faire la transition entre les barres de la nouvelle
échelle et les barres de mise à jour et de sortie.
D3 vous permet de transformer des documents en fonction des données, cela inclut
à la fois la création et la destruction d'éléments. D3 vous permet de modifer un
document existant en réponse à une interaction de l'utilisateur, une animation au fl
du temps ou même une notifcation asynchrone d'un tiers.
Une approche hybride est même possible, où le document est initialement rendu
sur le serveur, et mis à jour sur le client via D3.
Transformation non représentative :
D3 n'introduit pas de nouvelle représentation visuelle.
Contrairement à Processing ou à Protovis, le vocabulaire graphique de D3 provient
directement des standards web : HTML, SVG et CSS. Par exemple, vous pouvez
créer des éléments SVG en utilisant D3 et les styliser avec des feuilles de style
externes.
Vous pouvez utiliser des effets de fltre composites, des traits en pointillés et un
écrêtage. Si les fournisseurs de navigateurs introduisent de nouvelles
fonctionnalités demain, vous pourrez les utiliser immédiatement - aucune mise à
jour de la boîte à outils requise.
Et, si vous décidez à l'avenir d'utiliser une boîte à outils autre que D3, vous pouvez
prendre votre connaissance des normes avec vous !
7

Mieux encore, D3 est facile à déboguer en utilisant l'inspecteur d'élément intégré
du navigateur : les nœuds que vous manipulez avec D3 sont exactement ceux que
le navigateur comprend nativement.
Transitions :
L'accent mis par D3 sur la transformation s'étend naturellement aux transitions
animées. Les transitions interpolent progressivement les styles et les attributs au fl
du temps.
Le tweening peut être contrôlé via des fonctions d'accélération telles que «
élastique », «cubic-in-out» et «linéaire».
Les interpolateurs de D3 prennent en charge les deux primitives, telles que les
nombres et les nombres incorporés dans les chaînes (tailles de police, données de
chemin, etc.) et les valeurs composées.
Vous pouvez même étendre le registre interpolateur de D3 pour prendre en charge
les propriétés complexes et les structures de données.
Par exemple, pour fondu l'arrière-plan de la page en noir :
d3.select("body").transition() .style("background-color", "black");
Ou, pour redimensionner des cercles dans une carte de symboles avec un décalage
décalé :
d3.selectAll("circle").transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.attr("r", function(d) { return Math.sqrt(d * scale); });
En modifant uniquement les attributs qui changent réellement, D3 réduit les frais
généraux et permet une plus grande complexité graphique à des fréquences
d'images élevées.
8

D3 permet également le séquençage de transitions complexes via des événements.
Et, vous pouvez toujours utiliser les transitions CSS3, D3 ne remplace pas la boîte à
outils du navigateur, mais l'expose d'une manière plus facile à utiliser.
9

D3 js-last

Recommandé

Recommandé

Contenu connexe

Similaire à D3 js-last

Similaire à D3 js-last (20)

Plus de TECOS

Plus de TECOS (20)

D3 js-last