-
Notifications
You must be signed in to change notification settings - Fork 2
/
6-lier-les-donnees.html
200 lines (121 loc) · 11.2 KB
/
6-lier-les-donnees.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>6 - Lier les données</title>
<meta name="description" content="Traduction des tutoriels de Scott Murray sur D3.js.
">
<link rel="stylesheet" href="/scottmurray-d3-fr/css/main.css">
<link rel="stylesheet" href="/scottmurray-d3-fr/css/highlight.css">
<link rel="canonical" href="http://kaisersly.github.io/scottmurray-d3-fr/6-lier-les-donnees.html">
</head>
<body>
<div class="container">
<header class="site-header">
<div class="wrapper">
<h2><a class="site-title" href="/scottmurray-d3-fr/">Traduction des tutoriels de Scott Murray sur D3.js</a></h2>
</div>
</header>
<div>
<div class="col-md-12">
<ul class="pager">
<li class="previous">
<a href="/scottmurray-d3-fr/5-enchainer-les-methodes.html" class="previous">← 5 - Enchaîner les méthodes</a>
</li>
<li class="next">
<a href="/scottmurray-d3-fr/7-utiliser-vos-donnees.html" class="next">7 - Utiliser vos données →</a>
</li>
</ul>
</div>
<div class="col-md-offset-3 col-md-6">
<header>
<h1>6 - Lier les données</h1>
</header>
<article>
<hr />
<p><em>Lien vers le tutoriel original : <a href="http://alignedleft.com/tutorials/d3/binding-data">http://alignedleft.com/tutorials/d3/binding-data</a></em></p>
<hr />
<h2 id="lier-les-donnes">Lier les données</h2>
<p><em>Dernière mise à jour le 30 décembre 2012</em></p>
<p>Qu’est-ce que le binding, et pourquoi je voudrais l’appliquer à mes données ?</p>
<p>La visualisation de données est un processus qui consiste à lier des données (<em>mapping data</em>) à une représentation graphique. Des données en entrée, des propriétés visuelles en sortie. Les nombres plus grand donneront peut-être des barres plus grandes, ou des catégories spéciales donneront des couleurs plus claires. C’est vous qui définissez les règles de liaison (<em>mapping rules</em>).</p>
<p>Avec D3, on lie les valeurs de nos données en entrée aux éléments du DOM. Le binding c’est comme “attacher” ou associer des données à des éléments spécifiques, pour que vous puissiez y faire référence, plus tard, dans des règles de liaison. Sans l’étape du binding, on aurait un ensemble d’éléments DOM sans données attachées. Personne ne veut de ça.</p>
<h3 id="dans-une-liaison">Dans une liaison</h3>
<p>On utilise la méthode <strong><a href="https://github.com/mbostock/d3/wiki/Selections#wiki-data">selection.data()</a></strong> de D3 pour lier des données à des éléments DOM. Mais il y a deux choses à mettre en place, avant que l’on puisse lier des données :</p>
<ol>
<li>Les données</li>
<li>Une sélection d’éléments DOM</li>
</ol>
<p>Une chose à la fois.</p>
<h3 id="les-donnes">Les données</h3>
<p>D3 est intelligent lorsqu’il s’agit de gérer différents types de données. Il acceptera tous les tableaux de nombres, de chaînes de caractères ou d’objets (eux-mêmes pouvant contenir d’autres tableaux ou des paires clé/valeur). Il peut gérer du JSON (et du GeoJSON) sans aucun soucis, et possède même une méthode intégrée (<em>built-in</em>) pour vous aider à charger des fichiers CSV.</p>
<p>Mais pour garder les choses simples, on va débuter avec un tableau de nombres. Voilà notre ensemble de données :</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">dataset</span> <span class="o">=</span> <span class="p">[</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">25</span> <span class="p">];</span></code></pre></div>
<h3 id="faites-votre-slection">Faites votre sélection</h3>
<p>D’abord, vous devez décider ce que vous voulez sélectionner. À quels éléments vos données seront associées ? Encore une fois, on va rester super simple et dire que l’on veut un nouveau paragraphe pour chaque élément de notre ensemble de données. Vous vous imaginerez donc que quelque chose dans ce genre pourrait vous être utile</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s2">"body"</span><span class="p">).</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">"p"</span><span class="p">)</span></code></pre></div>
<p>et vous auriez raison, mais y’a un hic : Les paragraphes que l’on veut créer <em>n’existent pas encore</em>. Ça nous amène à un des causes courrantes de confusion avec D3 : Comment peut-on sélectionner des éléments qui n’existent pas encore ? Restez avec moi, car la réponse requiert que vous vous tordiez un peu l’esprit.</p>
<p>La réponse se trouve dans <strong>enter()</strong>, une méthode vraiment magique. Voilà le code final pour notre exemple, que je vais expliquer :</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s2">"body"</span><span class="p">).</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">"p"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">dataset</span><span class="p">)</span>
<span class="p">.</span><span class="nx">enter</span><span class="p">()</span>
<span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"p"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s2">"New paragraph!"</span><span class="p">);</span></code></pre></div>
<p><a href="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/index.html">Jetez un oeil à cette page de démo</a>. Vous verrez cinq nouveaux paragraphes, chacun avec le même contenu. Voilà ce qui se passe.</p>
<p><strong>d3.select(“body”)</strong> — Trouve l’élément <strong>body</strong> dans le DOM et transmet sa référence au prochain maillon de la chaîne.</p>
<p><strong>.selectAll(“p”)</strong> — Sélectionne tous les paragraphes dans le DOM. Comme aucun paragraphe n’existe pour l’instant, ça retourne une sélection vide. Voyez cette sélection vide comme représentant les paragraphes <em>qui vont bientôt exister</em>.</p>
<p><strong>.data(dataset)</strong> — Compte et analyse les valeurs des données. Il y a cinq valeurs dans notre ensemble de données, donc à partir de là, tout ce qui se passe sera exécuté cinq fois, une fois par valeur.</p>
<p><strong>.enter()</strong> — Pour créer de nouveaux éléments liés à des données, on doit utiliser la méthode <strong>enter()</strong>. Cette méthode jette un oeil au DOM, puis aux données qui lui ont été transmises. S’il y a plus de données que d’éléments DOM correspondants, alors <strong>enter()</strong> <em>crée un nouvel élément placeholder</em> sur lequel vous pourrez faire jouer votre magie. Elle transmet ensuite une référence à ce nouveau placeholder au prochain maillon de la chaîne.</p>
<p><strong>.append(“p”)</strong> — Prend la sélection placeholder créée par <strong>enter()</strong> et insère un élément <strong>p</strong> dans le DOM. Hourra ! Elle transmet ensuite une référence de l’élément qu’elle vient de créer au prochain maillon de la chaîne.</p>
<p><strong>.text(“New paragraph!”)</strong> — Prend la référence au nouvellement créé <strong>p</strong> et insère un texte.</p>
<h3 id="li-et-dtermin">Lié et déterminé</h3>
<p>Ok ! Toutes nos données ont été lues, analysées, et liées aux nouveaux éléments <strong>p</strong> que l’on a créés dans le DOM. Vous ne me croyez pas ? Retournez voir <a href="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/index.html">la page de démo</a> et ouvrez l’inspecteur web.</p>
<p><img src="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/1.png" alt="Web inspector" /></p>
<p>Okay, je vois cinq paragraphes, mais où sont les données ? Cliquez sur <em>Console</em>, tapez la ligne de code suivante et appuyez sur entrée :</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">"p"</span><span class="p">))</span></code></pre></div>
<p><img src="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/2.png" alt="JS console" /></p>
<p>Un tableau ! Cliquez sur le petit triangle gris, qui permet d’en révéler plus :</p>
<p><img src="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/3.png" alt="JS console" /></p>
<p>Notez les cinq paragraphes <strong>HTMLParagraphElements</strong>, numérotés de 0 à 4. Cliquez sur le triangle révélateur à côté du premier (numéro zéro).</p>
<p><img src="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/4.png" alt="JS console" /></p>
<p>Vous voyez ? Est-ce que vous le voyez ? J’ai du mal à contenir mon excitation. Et voilà :</p>
<p><img src="http://alignedleft.com/content/03-tutorials/01-d3/60-binding-data/5.png" alt="JS console highlight" /></p>
<p>Notre première valeur, le nombre 5, apparaît dans la propriété <strong>__data__</strong> du premier paragraphe. Cliquez sur les autres paragraphes, et vous verrez qu’ils contiennent eux aussi une propriété <strong>__data__</strong> qui a pour valeur : 10, 15, 20, et 25, comme on vient de le spécifier.</p>
<p>Lorsque D3 lie des données à un élément, cette donnée n’existe pas dans le DOM, mais elle existe en mémoire comme une propriété <strong>__data__</strong> de cet élément. Et la console vous permet de confirmer si vos données ont été liées ou pas.</p>
<p>Vos données sont prêtes. Faisons quelque chose avec.</p>
</article>
</div>
<div class="col-md-12">
<ul class="pager">
<li class="previous">
<a href="/scottmurray-d3-fr/5-enchainer-les-methodes.html" class="previous">← 5 - Enchaîner les méthodes</a>
</li>
<li class="next">
<a href="/scottmurray-d3-fr/7-utiliser-vos-donnees.html" class="next">7 - Utiliser vos données →</a>
</li>
</ul>
</div>
</div>
<hr>
<footer class="col-md-12">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><h4>Contacts</h4></div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
github : <a href="https://github.com/kaisersly">kaisersly</a>
</li>
<li>
twitter : <a href="https://twitter.com/kaisersly">@kaisersly</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>