D3 javascript Differenza tra foreach e ogni

Question

Qual è la differenza tra forEach e each in D3js?

Answer 1

Innanzitutto, .forEach() non fa parte di d3, è una funzione nativa degli array javascript. Quindi,

E funziona anche se d3 non è caricato nella pagina.

Successivamente, d3's .each() funziona su selezioni d3 (cosa si ottiene quando si d3.selectAll(...)). Tecnicamente, è possibile chiamare .forEach() in una selezione d3, poiché dietro le quinte, una selezione d3 è una matrice con funzioni extra (una di queste è .each()). Ma non dovresti farlo perché:

1. Fare ciò non produrrà il comportamento desiderato. Sapere come usare .forEach() con una selezione d3 per produrre qualsiasi comportamento desiderato richiederebbe una comprensione intima del funzionamento interno di d3. Quindi, perché farlo, se è possibile utilizzare solo la parte pubblica documentata dell'API.

2. Quando si chiama .each(function(d, i) { }) su una selezione d3, si ottiene di più di un semplice d e i: la funzione viene invocata in modo tale che la parola chiave in qualsiasi punto all'interno this che i punti di funzione per l'elemento HTML DOM associato con d. In altre parole console.log(this) dall'interno di function(d,i) {} registrerà qualcosa come <div class="foo"></div> o qualunque elemento html sia. E questo è utile, perché allora puoi chiamare la funzione su questo oggetto this per cambiare le sue proprietà CSS, i contenuti o qualsiasi altra cosa. Di solito, si usa d3 per impostare queste proprietà, come in d3.select(this).style('color', '#c33');.

L'asporto principale è che, utilizzando .each() si ottiene l'accesso a 3 cose che avete bisogno: d, this e i. Con .forEach(), su una matrice (come nell'esempio dall'inizio) si ottengono solo 2 elementi (d e i) e si dovrebbe fare un sacco di lavoro per associare anche un elemento HTML a questi 2 elementi. E questo, tra le altre cose, è come d3 è utile.