《D3.js資料可視化實戰手冊》——2.4 疊代選集中的元素

本節書摘來異步社群《d3.js資料可視化實戰手冊》一書中的第2章，第2.4節，作者： 【加拿大】nick qi zhu，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

有些時候，我們需要周遊選集中的所有元素，再根據它們的不同位置分别進行不同的處理。本節将使用d3的選集疊代api來實作。

請在浏覽器中打開如下檔案的本地副本。

d3為其選集對象提供了簡單的疊代接口，我們可以用類似javascript數組的方式疊代d3選集。在本例中，我們将對上個例子傳回的選集中的3個div元素進行疊代通路，并用索引号辨別每個元素。

技巧.tif 選集本質上來說是增強的數組。後續小節中，我們将探索一下選集的數組特性及使用方法。

上述代碼段将産生如下視覺效果。

疊代選集中的元素

這個例子基于之前的示例，除了在第a行中選取頁面所有div元素，并在第b行上設定class屬性之外，我們還對選集調用了each函數。這說明對于多元素選集我們可以進行疊代，并且分别處理每一個元素。

提示.tif 這種在一個函數傳回結果基礎上調用另一個函數的方式被稱為函數級聯調用（function chaining）。如果想進一步了解這種調用模式，請參見第1章。

selection.each(function)函數：each函數接受疊代函數作為其參數輸入。給定的疊代函數接受兩個可選參數d和i，以及一個隐含的參數this，this為指向目前dom元素的引用。第一個參數d表示這個元素的資料綁定（我們會在下一章對這一概念做更深入的闡述）。第二個參數i指目前疊代元素在整個選集中的索引值。索引值從0開始，每次疊代依次遞增1。

selection.append(name)函數：本例中用到的另一個函數為append。它負責建立一個名為傳入參數的新元素，并将其附加為目前選集的最後一個元素，然後傳回包含新添加元素的選集。最後我們進一步來研究一下這個例子。

行c定義了一個參數為d、i的疊代函數。行d則更加有趣，在一開始，d3.select函數将this封裝為一個d3選集，這個選集是一個包含目前dom元素的單元素選集。然後标準的d3選集api就可被用在d3.select(this)上。随後，我們在目前元素選集上調用append("h1")函數，建立h1元素并附加到目前元素上。然後将目前每一個建立h1元素的内容繪制為其索引值。最終效果請參見圖“疊代選集中的元素”。注意索引值是從0開始依次遞增的。