D3 javascript每行之間的區別

Question

D3js中的forEach和each有什麼不同？

Answer 1

首先，.forEach()不是d3的一部分，它是javascript數組的本地函數。所以，

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

即使d3沒有加載在頁面上，這工作。

接下來，d3的.each()適用於d3選擇（當您獲得d3.selectAll(...)時可獲得的結果）。從技術上講，您可以在d3選擇上致電.forEach()，因爲在幕後，d3選擇是具有額外功能的陣列（其中一個是.each()）。但你不應這樣做，因爲：

1. 這樣做不會產生所需的行爲。知道如何使用帶有d3選擇的.forEach()以產生任何期望的行爲，需要深入理解d3的內部工作原理。那麼爲什麼呢，如果你只能使用API​​的公開部分。

2. 當您在D3選擇呼叫.each(function(d, i) { })，您得到的不僅僅是d和i更多：函數被調用使得this關鍵字的功能點與d相關的HTML DOM元素內的任意位置。換言之，來自function(d,i) {}內部的console.log(this)將記錄類似<div class="foo"></div>或其他任何html元素。這很有用，因爲那麼你可以調用這個this對象的函數來改變它的CSS屬性，內容或其他。通常，您可以使用d3來設置這些屬性，如d3.select(this).style('color', '#c33');。

主要外賣的是，使用.each()您可以訪問你需要3樣東西：d，this和i。與.forEach()一樣，在一個數組上（比如從頭開始的例子），你只能得到2件東西（d和i），而且你還得做一堆工作來將HTML元素與這兩件事聯繫起來。除此之外，這是d3如何有用。