Apprenez à créer un graphique à barres avec D3 - Un tutoriel pour les débutants

D3.js est la bibliothèque JavaScript la plus populaire pour créer des représentations visuelles de vos données. Cependant, c'est un peu difficile à apprendre, donc je pense qu'il est important de commencer doucement.

Dans ce didacticiel, vous apprendrez à créer votre tout premier graphique à barres avec D3. Cela vous donnera une introduction aux concepts les plus importants, tout en vous amusant à construire quelque chose.

Nous avons également créé un cours gratuit D3.js sur Scrimba. Vérifiez le ici.

Maintenant, commençons.

La mise en place

Nous utiliserons la configuration la plus simple possible, en important simplement la bibliothèque D3 à partir d'un CDN.

Nous allons écrire notre code D3 dans la balise script. Deuxièmement, nous avons ajouté un élément au DOM. Si vous voulez jouer avec le code pendant que vous lisez ce tutoriel, consultez ce terrain de jeu Scrimba, qui contient la version finale du code.

La première chose que nous allons faire est de sélectionner cet élément et de le styliser un peu.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

Nous lui donnons une largeur et une hauteur, plus une .bar-chartclasse. Dans notre CSS, nous avons stylisé la classe comme ceci:

.bar-chart { background-color: #C7D9D9; } 

Voici le résultat:

Nous avons maintenant un joli conteneur SVG où nous pouvons dessiner notre graphique à barres. Le code pour cela est un peu complexe, alors regardons d'abord le tout, puis parcourons chaque étape:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

tout sélectionner()

La première chose que nous faisons peut sembler un peu étrange, nous faisons .selectAll("rect"), cependant, nous n'avons encore créé aucun élément. Donc, cette méthode retourne une sélection vide (un tableau vide). Cependant, nous allons bientôt créer des éléments en utilisant enter().append().

Cela peut sembler un peu déroutant. Mais expliquer comment selectAll()fonctionne en combinaison avec enter().append()est hors de la portée de ce didacticiel. Si vous voulez bien le comprendre, lisez cet article très attentivement.

Les données()

Nous enchaînons ensuite la data()méthode et passons dans notre jeu de données. Les données finiront par dicter la hauteur de chaque barre.

entrer()

L'étape suivante consiste à enchaîner la enter()méthode. Il enter()regarde à la fois l'ensemble de données dans lequel vous avez transmis data()  et la sélection que nous avons effectuée selectAll('rect'), puis il essaie de rechercher des «correspondances». Cela crée donc un mappage entre vos données et le DOM.

Mais rappelez-vous que la selectAll('rect')méthode a renvoyé une sélection vide , car il n'y a pas encore d' éléments dans le DOM. Cependant, l'ensemble de données comporte neuf éléments. Il n'y a donc pas de «correspondance».

La enter()méthode vous permet ensuite de créer un nouvel élément dans le DOM pour chaque élément de l'ensemble de données qui n'a pas encore d' élément correspondant .

ajouter()

Sur la ligne suivante, nous ajoutons un élément pour chacun des éléments. Comme cette méthode suit enter(), elle sera en fait exécutée neuf fois, une pour chaque point de données qui n'a pas de correspondant dans le DOM.

attr ()

L'étape suivante consiste à décider de la forme de chacun des rectangles (nos barres). Nous devons donner quatre attributs: hauteur, largeur, position x et la position y . Nous utiliserons la attr()méthode pour tout cela.

Commençons par la position y:

.attr("y", function(d) { return svgHeight - d }) 

Le premier paramètre dicte l'attribut que nous voulons ajouter: dans ce cas, la coordonnée y de la barre. Dans le second, nous avons accès à une fonction de rappel dans laquelle nous allons retourner la valeur que nous voulons que notre attribut ait.

Here, we get access to the data point at this step of the iteration process (remember, this method is invoked once per item in the dataset array). The data point is stored in the d argument. We’ll then subtract the given data point, d, from the height of our SVG container.

X and y-coordinates are always calculated starting from the top left corner. So when we subtract the height of the container with the d value, we get the y-coordinate for the top of the bar.

To make the bar stretch from this point and down to the bottom of the SVG container, we’ll need to give it a height equivalent to the value of the data point:

.attr("height", function(d) { return d; }) 

The next step is to give it a width:

.attr("width", barWidth - barPadding)

Here, we’re simply passing in a simple expression as opposed to the callback function, as we don’t need access to the data point. We’re simply taking a basis in the barWidth variable which we created further up, which is the total width of the container divided by the number of bars. In order to get a small gap between each of the bars, we’ll also subtract padding, which we’ve defined as 5.

The final step is to set the x-coordinates. This expression is a bit more complex:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

Here, we’re first of all taking advantage of a second parameter in the callback, i. This is the index of the given item in the array.

To set the coordinate for each of the bars, we’ll simply multiply the index with the barWidth variable. We’ll then return a string value which describes the transformation for the x-axis, for example "translate(100)". That would push the bar 100 pixels to the right.

And just like that, you have your very first bar chart in D3.js.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.