1. select 和 selectAll 的區別
在 D3 中，選擇元素的函數有兩個：select 和 selectAll，它們的使用非常重要。先說明一下它們的區別：
select 是選擇所有指定元素的第一個
selectAll 是選擇指定元素的全部（用於同時操作）
這兩個函數返回的結果稱為選擇集。
來看一個具體的例子，現有如下代碼：
<html> <head> <meta charset="utf-8"> <title>select,append,remove</title> </head> </style> <body> <h1>This is a cat.</h1> <h1>That is a dog.</h1> <h1>I like cat.</h1> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> </script> </body> </html>
熟悉 HTML 的朋友一定會知道上面的代碼輸出什么，是三行 h1 大小的標題。
現在要完成兩種選擇元素的任務：
（1）選擇第一個 <h1> 元素
（2）同時選擇三個 <h1> 元素
代碼如下：
var body = d3.select("body"); //選擇body（第一個body，當然也只有一個body） var h1 = body.select("h1"); //選擇第一個h1 var all_h1 = body.selectAll("h1"); //選擇所有的h1
為了證明上面的變量 h1 選擇的是第一個 <h1> 元素，變量 all_h1 選擇的是所有的 <h1> 元素，我們加上一行代碼：
h1.style("color","red");
給 h1 變量選中的元素上色，加上這一句后，會發現結果為：
因此，可以證明選中的是第一個 <h1> 元素。
如果換上代碼：
all_h1.style("color","blue");
會發現三行文字都變成了藍色。
那么如果想選擇第二個 <h1> 元素呢？正如上一節所說的，有兩種方法，要么給 <h1> 加 id ，要么用無名函數 function 的形式，詳細見上一章。
2. 插入元素
接下來在 <body> 里新插入一個 <h1> 元素，代碼如下
var new_h1 = body.append("h1"); new_h1.text("Append new h1");
這里表示插入一個 <h1> 元素后，將其文字設為 Append new h1，結果為：
3. 刪除元素
刪除一個元素時，對於選擇的元素，使用 remove 即可，代碼如下：
new_h1.remove();
這是刪除 new_h1 變量中選擇的元素。