《D3.js資料可視化實戰手冊》——2.7 處理原始選集

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

雖然不常使用，但某些時候，擷取d3的原始選集數組對于開發是有利的，因為無論是為了調試，還是和其他javascript庫內建，都可能需要原始的dom元素。在本例中，我們将會對此進行展示。同時，我們也會觀察d3選集對象的内部結構。

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

當然，可以使用nth-child選擇器，或者在each函數基礎上使用選集疊代函數，但是有些情況下，這些方式過于累贅。這裡我們提供一種更加便利的處理原始選集數組的方法。在本例中，可以看到對原始選集數組進行存取和處理的方法。

本例生成的視覺效果如圖所示。

在本例中，我們周遊了一個頁面上的html表格，并為之上色。事實上，這并非在d3下為表格的奇偶行上色的最好示例，但在這裡，我們主要意在展示如何擷取原始選集數組。

技巧.tif 一個更好的為表格奇偶行上色的方式是使用each函數，再根據不同的索引參數來處理。

在行a中，我們選取了所有的行并将選集結果存儲在rows變量中。d3選集結果存在于一個javascript二維數組中。是以，可以使用rows0和rows0來分别獲得第一和第二個選中元素。在行b中，表格的header元素可以通過rows0來擷取，得到一個dom元素對象。在前面章節中我們提到過，任何dom元素都可以直接通過d3.select來選取，如行c所示。在行d、e、f中，我們展示了如何對選集中的每個元素進行直接索引和通路。

在某些情況下，很容易就能獲得原始選集。但是，由于它需要直接通路d3選集中的數組資料，這就會使得代碼對此産生結構性的依賴。換句話說，如果在未來的d3版本中，它改變了這一結構，那麼依賴它的代碼就會受到影響。是以，除非不得已，我們應該盡量避免操作原始選集。

技巧.tif 這種方式通常并不必要，但是如果在特定情況下，例如在單元測試時，我們能夠友善地知道每個元素的索引值和其引用，那麼這一方式是非常有效的。我們在後面的章節将詳細講解單元測試。