Pour créer avec d3.js un tableau HTML à partir d'une matrice JavaScript

a b
c d
	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]; }); });+

Exemples sans data()

Exemples avec data()

(*) 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