Lien vers le tutoriel original : http://alignedleft.com/tutorials/d3/setup
Mise en place
Dernière mise à jour le 22 février 2014
Télécharger D3
Commencez par créer un nouveau répertoire pour votre projet. Dans ce répertoire, je vous recommande de créer un sous-répertoire appelé d3. Ensuite téléchargez la dernière version de d3.v3.js dans ce sous-répertoire. Au moment de l’écriture de ce tutoriel, la dernière version de D3 est la 3.4.2.
D3 propose aussi une version minifiée, d3.v3.min.js, dans laquelle les espaces ont été retirés pour parvenir à un fichier plus petit, et donc un téléchargement plus rapide. Les fonctionnalités sont les mêmes, mais d’une manière générale vous utiliserez la version standard lorsque vous travaillerez sur un projet (pour un débuggage plus facile), et vous passerez à la version minifiée lorque vous mettrez votre application en production (pour avoir des temps de chargements optimisés). Le choix est votre, mais dans ces tutoriels nous utiliserons la version standard.
Vous avez aussi la possibilité de télécharger le dépôt de D3 en entier. Cela vous donnera non seulement les fichiers JavaScript, mais aussi tout le code source. Vous pouvez naviguer dans le contenu du dépôt ou juste télécharger le tout dans un fichier ZIP compressé.
Référencer D3
Créez une page HTML simple index.html dans votre répertoire de projet. La structure de votre répertoire devrait ressembler à ceci :
project-folder/
d3/
d3.v3.js
d3.v3.min.js (optionnel)
index.html
Maintenant, copiez ce qui suit dans votre fichier index.html, cela référencera D3 dans la section head et vous donnera un endroit où mettre votre code JavaScript :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Votre joli code D3 viendra se loger ici
</script>
</body>
</html>Afficher votre page
Dans certains cas, vous pouvez vous contenter d’ouvrir votre fichier HTML dans votre navigateur pour le voir. Cependant, lorque vous chargez des ressources externes, il est préférable de lancer un serveur web local et voir votre page depuis l’adresse http://localhost:8888/. Vous pouvez utiliser un serveur comme MAMP, ou voir ces notes sur le wiki de D3 (en) sur la manière de lancer un serveur web temporaire.