D3 javascript Différence entre foreach et chaque

Question

Quelle est la différence entre forEach et each dans D3js?

Answer 1

Tout d'abord, .forEach() n'est pas une partie de d3, c'est une fonction native de tableaux javascript. Donc,

["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2

Et cela fonctionne même si d3 n'est pas chargé sur la page.

Ensuite, d3 .each() fonctionne sur d3 sélections (ce que vous obtenez lorsque vous d3.selectAll(...)). Techniquement, vous pouvez appeler .forEach() sur un d3 sélection, depuis les coulisses, une d3 sélection est un tableau avec des fonctionnalités supplémentaires (l'un d'eux est - .each()). Mais vous ne devriez pas le faire parce que:

1. Cela ne peut pas produire le comportement souhaité. Savoir comment utiliser .forEach() avec un d3 sélection afin de produire un comportement souhaité nécessiterait la connaissance intime des rouages de d3. Alors pourquoi le faire, si vous pouvez simplement utiliser la documentation, la partie publique de l'API.

2. Lorsque vous appelez .each(function(d, i) { }) sur un d3 sélection, vous obtenez plus que d et i: la fonction est invoquée tels que l' this mot-clé n'importe où à l'intérieur que les points de fonction pour le DOM HTML élément associé à d. En d'autres mots, console.log(this) depuis l'intérieur d' function(d,i) {} va se connecter à quelque chose comme <div class="foo"></div> ou quel que soit l'élément html, il est. Et c'est utile, parce qu'alors vous pouvez appeler la fonction sur cette this objet afin de modifier ses propriétés CSS, contenu ou quoi que ce soit. Généralement, vous utilisez d3 pour définir ces propriétés, comme en d3.select(this).style('color', '#c33');.

Les principaux plats à emporter, c'est que, à l'aide de .each() vous aurez accès à 3 choses dont vous avez besoin: d, this et i. Avec .forEach(), sur un tableau (comme dans l'exemple du début), vous obtenez seulement 2 choses (d et i), et que vous auriez à faire un tas de travail à également associer un élément HTML avec ces 2 choses. Et qui, entre autres choses, est de savoir comment d3 est utile.