《D3.js資料可視化實戰手冊》—— 2.1 簡介

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

選集（selection）是基于d3的可視化項目的重要基礎之一，它用來定位頁面上的特定視覺元素。如果你已經熟知w3c的标準css選擇器，或一些流行的javascript庫（如jquery或zepto.js）提供的選擇器api，那麼掌握d3的選擇器api對你來說将易如反掌。不過，即便從未接觸過選擇器也無妨，本章将借助一些生動的例子，帶領你一步步地進入選擇器的世界，這些例子涵蓋了可視化中的絕大多數應用場景。

所有的現代浏覽器都内嵌支援w3c的标準選擇器api。然而，在網絡開發，尤其資料可視化領域的開發中，這些api仍然具有局限性。它們隻提供選擇器，卻并不提供集合類型。也就是說，雖然選擇器api有助于在文檔中選擇元素，然而為了操作這些元素，你仍然需要周遊每個元素，如以下代碼段所示。

◆ #foo：選中id為foo的元素

。

◆ foo：選中foo 标簽元素。

◆ .foo：選中所有class為foo的元素

◆ [foo=goo] ：選中所有屬性foo的值為goo的元素

◆ foogoo：選中foo元素内的goo子元素。

◆ foo#goo：選中id為goo 的foo元素。

◆ foo.goo：選中class為goo的foo 元素。

◆ foo:first-child：foo 元素的第一個子元素。

//<--選中這一個

◆ foo:nth-child(n)：foo元素的第n個子元素。

//<--foo:nth-child(2)

//<--foo:nth-child(3)