在D3.js中，选择元素的函数有两个：select 和 selectAll 。 先说明一下它们的区别：
- select 是选择所有指定元素的第一个
- selectAll 是选择指定元素的全部（以用于后面同时操作）
来看一个具体的例子，现有如下代码：
<html>
<head>
<meta charset="utf-8">
<title>select,append,exit</title>
</head>
<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大小的标题。
如果要完成两种选择任务：选择第一个h1 和 同时选择三个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变量选中的元素上色，加上这一句，会发现结果为：
如此，我们可以证明我们选中的是第一个元素。
如果换上代码：
all_h1.style("color","blue");
会发现三行文字都变成了蓝色。
那么如果想选择第二个h1呢？有两种方法，要么给h1加id，要么用function的形式。
一：为第二个h1加一个id，即
<h1 id="k2">That is a dog.</h1>
再选择
var h1 = d3.select("body").select("#k2"); //选择元素
再进行操作即可。
二、在function(d,i)里操作，例如
all_h1.text(function(d,i){
if(i==2){
....
}
});
下面详细介绍如何使用数据和选择元素
现在页面中有三行文字，代码为：
<p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p>
定义一个集合set，里面有三个元素：
var set = ["I like dog","I like cat","I like snake"];
要用这三个字符串给分别给上面的三个<p>赋值，代码如下：
var sp = d3.select("body").selectAll("p"); //选择元素
sp.data(set) //使用数据集合
.text(function(d,i){
return d;
});
上面第一行表示的是选择body里的所有p，再将这个集合赋值给一个变量p。第二行是表明要使用数据集合set，第三行表示要改变p里的文本内容。注意到后面有一个函数funciont(d,i)，这是为了分别使用数据集合set里的元素。
如果不适用数据集合set，想要将所有文本都变为相同的字符串（如都变成China），只需：
sp.text("China");
即可。如果要使用集合分别赋值，要使用函数function(d,i)，这个函数的第一个参数的意思是datum（数据）,第二个参数的意思是index（索引），要注意，当使用数据函数data指定了数据后，数据集合set和你选择的p集合是一一对应的（如果set和p的数量正好一致的情况，不一样的情况以后再讨论）。函数里面只有一个语句 return d； ， 表示直接返回数据，意思是对于每一个索引 i，都直接返回数据d。 d3.js会自动按先后顺序为各个p赋值的。
结果如下图：
接下来在body里新插入一个h1
var new_h1 = body.append("h1");
new_h1.text("Append new h1");
这里表示在body里新插入一个h1标签，插入之后返回新插入的元素，再设定文字为Append new h1。
删除一个元素时，对于选择的元素使用remove，如：
new_h1.remove();这是删除new_h1变量中选择的元素。
原文：【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素