Pourquoi seulement 3 paragraphes sont-ils ajoutés?

Question

Je suis débutant en d3. J'ai lu que quand on lie un ensemble de données de $ n $ entités à un élément, les appels entrent, et effectue ensuite des opérations, ces opérations seront effectuées $ n $ fois.

Cependant, ici, mon paragraphe ne en annexe 3 fois même si la taille de mon ensemble de données est 4: http://jsfiddle.net/johnhoffman/tYr5U/

d3.select("body").data([1, 2, 3, 4]).enter().append("p").text("g"); 

sortie:

g 
g 
g 

Pourquoi seulement 3 fois?

Answer 1

Voici le code que je suppose que vous voulez utiliser.

d3.select("body").selectAll("p").data([1,2,3,4]).enter().append("p").text("g"); 

La jointure doit être effectuée avec les éléments "p" et non avec l'élément "body".

Quant à savoir pourquoi il a trois dans votre exemple:

Les données comporte quatre éléments, étant liés au seul élément « corps ». Par défaut, le premier élément, 1, est lié au corps existant (défini en HTML). Les 3 éléments restants sont liés à des éléments "corps" inexistants. Puisque "enter()" n'est appelé que pour les éléments inexistants, l'opération append est appelée trois fois à la racine du DOM.

Pour démontrer cela, essayez:

d3.select("body").data([1,2,3,4]).enter().append("p").text(function(d) {return d;}); 

Et vous verrez le nombre dans les données en annexe, au lieu de g.

Confus, mais le Circles Tutorial m'a aidé à comprendre cela.