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

本節書摘來非同步社群《D3.js資料視覺化實戰手冊》一書中的第2章，第2.2節，作者： 【加拿大】Nick Qi Zhu，更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

2.2 選擇單個元素

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

2.2.1 準備階段

請在瀏覽器中開啟如下檔案的本地副本。

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/single-selection.html

2.2.2 開始程式設計

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

<p id="target"></p><!-- A -->
<script type="text/javascript">
  d3.select("p#target") // <-- B
  .text("Hello world!"); // <-- C
</script>

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

2.2.3 工作原理

在D3中，我們用d3.select方法來實現對單個元素的選取。該select方法接受一個CSS3選擇器字串或者待操作物件的引用，並返回一個D3選集。隨後，就可以用級聯修飾函式對該選集的屬性以及HTML進行操作了。

技巧.tif 如果發現多個匹配元素，最終只返回第一個匹配的元素。

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

selection.attr函式：用來讀取或改變元素上的給定屬性。
// 將p元素的foo屬性設為goo
d3.select("p").attr("foo", "goo");
//讀取p元素的foo屬性
d3.select("p").attr("foo");
selection.classed函式：用來新增、刪除選定元素上的css class。
// 檢測p元素是否有名為goo的class
d3.select("p").classed("goo");
//為p元素新增goo class
d3.select("p").classed("goo", true);
//移除p元素上的goo class。classed方法也接受函式作為引數傳入，
// 從而可以動態地新增或移除css class
d3.select("p").classed("goo", function(){return false;});
selection.style函式：用來給選定元素新增指定樣式。
// 獲取p元素的font-size
d3.select("p").style("font-size");
//將font-size的值設為10px
d3.select("p").style("font-size", "10px");
//將font-size的值設為某個函式的運算結果。style方法也接受函式作為引數傳入，
// 從而可以動態地改變樣式的值  
d3.select("p"). style("font-size", function(){
  return normalFontSize + 10;});
selection.text函式：用來獲取或設定選定元素的文字內容。
// 獲取p元素的文字內容
d3.select("p").text();
// 將p元素的文字內容設為"hello"
d3.select("p").text("Hello");
// text方法也接受函式作為引數傳入，從而可以動態地改變文字內容
d3.select("p").text(function () {
  var model = retrieveModel();
  return model.message;
});
selection.html函式：用來更改元素內的HTML。
// 獲取p元素的inner html
d3.select("p").html();
// 將p元素的inner html 設為 "<b>Hello</b>"
d3.select("p").text("<b>Hello</b>");
// html方法也接受函式作為引數傳入，從而可以動態地改變元素內的HTML
d3.select("p").text(function () {
  var template = compileTemplate();
  return template();
});

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

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