《D3.js資料可視化實戰手冊》——2.5 使用子選擇器

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

我們常常需要在特定範圍下選擇元素。例如，選取某個section元素下的所有div元素。本例中，我們将介紹d3中這種需求的不同的實作方式及各自的優缺點。

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

下面的代碼分别通過兩種不同方式，選取了兩個div元素。

代碼的視覺效果如圖所示。

盡管視覺效果相同，但是這個例子中使用了兩種完全不同的子選擇技術。我們在這裡将分别讨論它們的優缺點，以及各自的使用場合。

3級選擇器連接配接符：在行a中，d3.select方法接受了一個特别的字元串，這個字元串為用大于符号（u+003e, >）連接配接的兩個元素名稱。這種文法叫做連接配接符（這裡大于号表示子連接配接符）。3級選擇器支援一些不同的結構連接配接符。我們先來快速浏覽一下一些常用連接配接符。

後代連接配接符：這個連接配接符的文法為selector selector。

後代連接配接符，顧名思義，用來描述兩個選擇器之間的廣義父子關系。我們稱之為廣義，是因為第二個選擇器可以是第一個選擇器的任意後代。讓我們來看一些例子。

div em<code>`</code>

由于div是em元素的祖先，是以這個例子選取了其中的em元素。

子連接配接符：該連接配接符的文法為selector &gt; selector。

子連接配接符描述了兩個元素之間的嚴格父子關系。子連接配接符用一個大于号（u+003e，&gt;）連接配接兩個元素。

使用如下選擇器。

d3.select("#section2") // &lt;-- b

從以上代碼可以看到，在選擇div元素之前，我們在第b-1行中對#section2使用了一個修飾函數。我們在下一節中将進一步探索這種靈活性。