《D3.js資料可視化實戰手冊》——2.2 選擇單個元素

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

在進行視覺處理時，我們常常需要選擇頁面上的單個元素。本例将展示在d3中如何使用css選擇器來選取特定單個元素。

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

讓我們來選取一些元素并在螢幕上列印經典的“hello world”資訊。

本例将在螢幕上顯示“hello world”。

在d3中，我們用d3.select方法來實作對單個元素的選取。該select方法接受一個css3選擇器字元串或者待操作對象的引用，并傳回一個d3選集。随後，就可以用級聯修飾函數對該選集的屬性以及html進行操作了。

技巧.tif 如果發現多個比對元素，最終隻傳回第一個比對的元素。

本例中，我們在b行，通過id的值選取了段落元素，然後在c行中将它的文本設定為hello world。所有的d3選集都支援一系列标準修飾函數，本例中用到的text函數就是其中之一。下面列出了本書中用到的部分常見修飾函數。

這些修飾函數可用于單個元素以及多個元素，當應用于多元素選集時，這些函數會依次作用于其中每個元素。在後續的内容中将會看到類似示例。

提示.tif 當函數被作為參數傳入修飾函數時，其實同時還有一些其他的隐含參數傳入，最終實作了資料驅動計算。d3的強大之處就在于資料驅動的方式，它的名稱資料驅動文檔（data-driven document），也正是來自于此。我們在後續章節中會詳細讨論這一問題。