Extension:Graph/Interactive Graph Tutorial/fr

Dans ce tutoriel, nous allons créer un graphe interactif qui affichera les taux de fertilité historiques par pays, avec un curseur pour sélectionner l'année, et une carte pour montrer la distribution des taux partout sur la planète. Si vous voulez investiguer le code source de ce graphe uniquement, il est disponible sur une page séparée. Utilisez le bac à sable graphique pour vos tests. Vous pourriez également être intéressés par la documentation complète de Vega (en anglais).

Move the slider to change the year, and hover the mouse over countries to read the rate. Try it !

Dessiner des formes
Nous commençons par dessiner quelques éléments (marques). Le code du graphe est encadrer par la balise, même ci celui-ci n'est pas interactif. Ouvrez le bac à sable graphique et copiez y le code suivant sans la balise &lt;graph> pour vous donner une idée.

Astuce : utilisez l'« éditeur de code » pour copier les spécifités du graphe sur l'éditeur Vega pour vous entrainer.

Signal IsDragging
Pour que l'on puisse faire glisser notre objet poignée, il faut d'abord savoir si on a cliqué dessus ou pas. Pour cela, ajoutons un signal qui devient true quand l'objet est cliqué (isDragging), et une marque textuelle pour afficher (debogage) le résultat :

Gérer le signal Position
Maintenant que nous savons quand l'objet est glissé, nous ajoutons un signal  qui ne change de valeur que lorsque le signal isDragging est true. Nous attachons aussi le nouveau signal au gestionnaire de coodonnées « x » via la section « update » :

Echelonnage du signal de position de la poignée
Avoir la position en pixels du curseur n'est pas très utile - nous préfèrerions plutôt avoir une valeur qui a un sens pour notre graphe, comme l'année. Vega scales provide a useful mechanism for converting between our data (e.g. years) and the screen coordinates, and back (invert). In this step, we add "yearsScale" linear scale for values 1960..2013, mapping it to the whole width of the graph (excluding padding). We also add a new scaledHandlePosition signal that translates from the mouse X position to the meaningful value in years.

Effacer la valeur de l'année
Si vous l'avez remarqué, la poignée peut dépasser la largeur du graphique ce qui produit des résultats incohérents. Also, the scaled value is not an integer that we expect of the year value. To fix this, we can introduce one more post-processing signal called "currentYear" to convert it to an integer and limit it to the needed range. We also initialize it to a reasonable value, and we tie both the "yearLabel" and the position of the handle bar back to this value. Note that the handle's position needs to be in screen coordinates, so we have to use the "yearsScale" to convert the value back:

Nettoyage final
À présent nous pouvons retirer toutes les marques de débogages. Nous n'avons également plus besoin de séparer les signaux handlePosition et scaledHandlePosition parce que la mise à l'échelle peut avoir lieu à la même étape :

Prochaine étape
Veuillez continuer sur la partie 2.