web-dev-qa-db-fra.com

D3 javascript Différence entre foreach et chaque

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

javascriptd3.js
82
Kuan

Tout d'abord, .forEach() ne fait pas partie de d3, c'est une fonction native des tableaux javascript. Alors,

["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, .each() de d3 fonctionne sur les sélections d3 (ce que vous obtenez lorsque vous d3.selectAll(...)). Techniquement, vous pouvez appeler .forEach() sur une sélection d3, car en coulisse, une sélection d3 est un tableau avec des fonctions supplémentaires (l'un d'eux est .each()). Mais vous ne devriez pas faire cela parce que:

  1. Cela ne produira pas le comportement souhaité. Savoir utiliser .forEach() avec une sélection d3 afin de produire le comportement souhaité nécessiterait une compréhension intime du fonctionnement interne de d3. Alors pourquoi le faire, si vous pouvez simplement utiliser la partie publique et documentée de l’API.

  2. Lorsque vous appelez .each(function(d, i) { }) sur une sélection d3, vous obtenez plus que simplement d et i: la fonction est invoquée de sorte que le mot clé this se trouve n'importe où à l'intérieur. cette fonction pointe sur l'élément HTML DOM associé à d. En d'autres termes, console.log(this) de l'intérieur function(d,i) {} enregistrera quelque chose comme <div class="foo"></div> Ou quel que soit l'élément html dont il s'agit. Et c’est utile, car vous pouvez ensuite appeler function sur cet objet this afin de modifier ses propriétés CSS, son contenu ou autre. En général, vous utilisez d3 pour définir ces propriétés, comme dans d3.select(this).style('color', '#c33');.

La principale conclusion est que, en utilisant .each(), vous avez accès à trois choses essentielles: d, this et i. Avec .forEach(), sur un tableau (comme dans l'exemple du début), vous n'obtenez que 2 choses (d et i), et vous devez faire un beaucoup de travail pour associer également un élément HTML à ces 2 choses. Et c’est entre autres choses comment D3 est utile.

167
meetamit