《D3.js資料可視化實戰手冊》——2.3 選取多個元素

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

通常情況下，我們很少隻選取單個元素，相反大多數情況下是對頁面上的多個元素進行特定處理。在下面的例子中，我們将介紹d3的多元素選擇器及其api。

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

本例展示了d3.selectall函數的用途。我們選取3個不同的div元素，利用css的class同時為其添加效果。

本例的效果如圖。

你可能會注意到，上面的例子和單元素選擇器的版本非常類似。這正是d3選擇器的強大之處。無論處理多少個元素，修飾函數都是不變的。我們前面提到的所有修飾函數都能夠直接應用于多元素選集，也就是說，d3選集是基于集合的。

盡管上面的示例表達的意思已經足夠清晰，我們仍然要詳細分析一下。在行a中，d3.selectall方法選取了頁面上的所有div元素，該方法傳回一個包含3個div元素的選集對象。然後，在行b中，我們對這一選集調用attr函數，将這3個元素的class屬性都設定為red box。從本例可見，選擇和操作的相關代碼都非常統一，即便頁面出現更多的div元素，也不用改變原有代碼。盡管這在這裡看來無足輕重，但在後面的章節中，我們将更深地體會到這種方式将令代碼簡單且容易維護。