本章介紹在 D3 中選擇、插入、刪除元素的方法。

http://wiki.jikexueyuan.com/project/d3wiki/images/select-1.png" alt="插入刪除元素" />

如何選擇元素

上一章已經(jīng)講解了 select 和 selectAll，以及選擇集的概念。本節(jié)具體講解這兩個(gè)函數(shù)的用法。

假設(shè)在 body 中有三個(gè)段落元素：

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

現(xiàn)在，要分別完成以下四種選擇元素的任務(wù)。

選擇第一個(gè) p 元素

使用 select ，參數(shù)傳入 p 即可，如此返回的是第一個(gè) p 元素。

t("p");
p1.style("color","red");

結(jié)果如下圖，被選擇的元素標(biāo)記為紅色。

http://wiki.jikexueyuan.com/project/d3wiki/images/select-2.png" alt="選擇第一個(gè)元素" />

選擇三個(gè) p 元素

使用 selectAll 選擇 body 中所有的 p 元素。

var p = body.selectAll("p");
p.style("color","red");

結(jié)果如下：

http://wiki.jikexueyuan.com/project/d3wiki/images/select-3.png" alt="選擇三個(gè)元素" />

選擇第二個(gè) p 元素

有不少方法，一種比較簡單的是給第二個(gè)元素添加一個(gè) id 號。

Pear

然后，使用 select 選擇元素，注意參數(shù)中 id 名稱前要加 # 號。

var p2 = body.select("#myid");
p2.style("color","red");

結(jié)果如下：

http://wiki.jikexueyuan.com/project/d3wiki/images/select-4.png" alt="選擇第二個(gè)元素" />

選擇后兩個(gè) p 元素

給后兩個(gè)元素添加 class，

<p class="myclass">Pear</p>
<p class="myclass">Banana</p>

由于需要選擇多個(gè)元素，要用 selectAll。注意參數(shù)，class 名稱前要加一個(gè)點(diǎn)。

var p = body.selectAll(".myclass");
p.style("color","red");

結(jié)果如下：

http://wiki.jikexueyuan.com/project/d3wiki/images/select-5.png" alt="選擇后兩個(gè)元素" />

關(guān)于 select 和 selectAll 的參數(shù)，其實(shí)是符合 CSS 選擇器的條件的，即用“井號（#）”表示 id，用“點(diǎn)（.）”表示 class。

此外，對于已經(jīng)綁定了數(shù)據(jù)的選擇集，還有一種選擇元素的方法，那就是靈活運(yùn)用 function(d, i)。我們已經(jīng)知道參數(shù) i 是代表索引號的，于是便可以用條件判定語句來指定執(zhí)行的元素。

插入元素

插入元素涉及的函數(shù)有兩個(gè)：

• append()：在選擇集末尾插入元素
• insert()：在選擇集前面插入元素

假設(shè)有三個(gè)段落元素，與上文相同。

?append()

body.append("p")
    .text("append p element");

在 body 的末尾添加一個(gè) p 元素，結(jié)果為：

Apple
Pear
Banana
append p element

insert()

在 body 中 id 為 myid 的元素前添加一個(gè)段落元素。

body.insert("p","#myid")
  .text("insert p element");

已經(jīng)指定了 Pear 段落的 id 為 myid，因此結(jié)果如下。

Apple
insert p element
Pear
Banana

刪除元素

刪除一個(gè)元素時(shí)，對于選擇的元素，使用 remove 即可，例如：

var p = body.select("#myid");
p.remove();

如此即可刪除指定 id 的段落元素。