本節書摘來異步社區《D3.js數據可視化實戰手冊》一書中的第2章，第2.5節，作者： 【加拿大】Nick Qi Zhu，更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

2.5 使用子選擇器

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

2.5.1 準備階段

請在瀏覽器中打開如下文件的本地副本。

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

2.5.2 開始編程

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

<section id="section1"><div><p>blue box</p></div> </section> <section id="section2"><div><p>red box</p></div> </section> <script type="text/javascript">d3.select("#section1 > div") // <-- A.attr("class", "blue box");d3.select("#section2") // <-- B.select("div") // <-- C.attr("class", "red box"); </script>

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

2.5.3 工作原理

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

3級選擇器連接符：在行A中，d3.select方法接受了一個特別的字符串，這個字符串為用大于符號（U+003E, >）連接的兩個元素名稱。這種語法叫做連接符（這里大于號表示子連接符）。3級選擇器支持一些不同的結構連接符。我們先來快速瀏覽一下一些常用連接符。

后代連接符：這個連接符的語法為selector selector。

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

<div> <span> The quick <em>red</em> fox jumps over the lazy brown dog</span> </div>``` 使用以下選擇器。

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

子連接符：該連接符的語法為selector > selector。

子連接符描述了兩個元素之間的嚴格父子關系。子連接符用一個大于號（U+003E，>）連接兩個元素。

使用如下選擇器。

span > em``` 將選取出em元素，因為本例中em是span元素的一級子元素。而div>em將不會返回任何有效的選集，因為em并不是div的直接子元素。提示.tif 3級選擇器也支持相鄰選擇器，但由于用得比較少，我們先略過不講。感興趣的讀者可以參考W3C 3級選擇器文檔``http://www.w3.org/TR/css3-selectors/#sibling-combinators``。W3C 4級選擇器還提供了許多有趣的連接符，如相鄰后續（following-sibling）連接符或引用連接符，這些連接符同樣非常強大。D3子選擇器：在行B和C中，我們使用了不同的子選擇器技術。在本例中，行B通過“#section2”選取了一個section元素，然后在行C中級聯選擇了一個div元素。這種類似級聯選擇的方式構成了一個區域選擇。從字面上來說，這意味著選擇了一個嵌套在#secion2內部的div元素。而從語義上來說，這實質上類似于使用了后代連接符#section2 div。這種子選擇方式的好處在于父元素是先被獨立選取的，因此可以在繼續選擇子元素之前進行相應的處理，如以下代碼所示。

d3.select("#section2") // <-- B

.style("font-size", "2em") // <-- B-1 .select("div") // <-- C .attr("class", "red box");```

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

總結

以上是生活随笔為你收集整理的《D3.js数据可视化实战手册》——2.5 使用子选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。