Pour créer avec d3.js un tableau HTML à partir d'une matrice JavaScript
matrice JavaScript :
dataset = [["a", "b"], ["c", "d"]];
tableau équivalent à :
table>(tr>td*2)*2
Cas envisageables pour créer le tableau
5 possibilités trouvées avec la version 3 de d3.js, et 7 possibilités avec la version 4.
4 possibilités sont communes aux deux versions *.
Le troisième argument en version 4 n'est en effet plus un index, mais réfère désormais aux nœuds parents :
d3.js v4: How to access parent group's datum index? et Open questions. #47.
Avec la méthode data(), il y a ainsi trois cas communs ;
et sans data(), 1 cas mixte, 1 pour la v3, et 3 pour la v4.
|
sans data() |
avec data() |
sans each() |
version 3 |
d3.selectAll("tr").selectAll("td")
.text(function (d, i, j) { return dataset[j][i]; });+ |
version 4 |
d3.selectAll("tr").selectAll("td")
.text(function (d, i) { return dataset[indexInParent(this.parentNode)][i]; });+ |
d3.selectAll("tr").selectAll("td")
.text(function (d, i) { return dataset[$(this.parentNode).index()][i]; });+ |
data(structure des données)d3.selectAll("tr").selectAll("td")
.data(function (d, i) { index.push(i); return new Array(dataset[i].length); })
.text(function (d, i) { i == 0 && indice++; return dataset[index[indice]][i]; });+ |
|
d3.selectAll("tr").data(dataset)
.selectAll("td")
.data(function (d) { return d; })
.text(function (d) { return d; });+ |
d3.selectAll("tr").data(dataset)
.selectAll("td")
.text(function (d, i) { return this.parentNode.__data__[i]; });+ |
avec each() |
d3.selectAll("tr")
.each(function (d, i) {
d3.select(this).selectAll("td")
.text(function (D, j) { return dataset[i][j]; });
});+ |
d3.selectAll("tr").data(dataset)
.each(function (d) {
d3.select(this).selectAll("td")
.text(function (D, i) { return d[i]; });
});+ |
(*) 8 possibilités trouvées au total. La moitié est commune aux deux versions de d3, et l'autre moitié spécifique. À visualiser par deux ensembles en intersection, de 5 et 7 possibilités.
Début de page