1 选择元素
D3选择元素的函数有两个：select和selectAll
- select：返回匹配选择器的第一个元素
- selectAll：返回匹配选择器的所有元素
这里的选择器指的是CSS选择器。
select和select All函数中传递的参数有两种：
- CSS选择器：
d3.select("body");
d3.select("#important");
d3.select(".content");
d3.selectAll("p");
d3.select(".content");
d3.select("ul li"); - 已经被DOM API选择的元素（不推荐）
var important = document.getElementById("important");
d3.select(important);
var content = document.getElementByClassName("content");//使用DOM选择类为content的元素集
//如果使用select，达不到选择第一个元素的效果
d3.select(content);
//以下是正确的使用方法
d3.selectAll(content);
另：如果要选择body中的所有p元素，除了使用CSS的派生选择器作为参数之外，还可以采用“连缀语法”。
d3.select("body").selectAll("p");
2 选择集
select和selectAll函数返回的对象称为选择集（selection），添加、删除、设定网页中的元素，都得使用选择集。
2.1 查看状态
查看选择器的函数共有三种：
- selection.empty()
如果选择集为空，返回true；不为空，返回false。 - selection.node()
返回第一个非空元素，如果选择集为空，返回null。 - selection.size()
返回选择集中的元素个数。
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script>
var p = d3.selectAll("p");
console.log(p.empty());//false
console.log(p.node());//<p>段落1</p>
console.log(p.size());//3
</script>
</body>
2.2 设定和获取属性
设定和获取选择集属性的函数共6个：
- selection.attr(name[,value])
设定或获取选择集的属性，name是属性名称，value是属性值。如果省略value，则返回当前的属性值；如果不省略，则将属性name的值设置为value。
d3.select("p").attr("id","para"); - selection.classed(name[,value])
设定或获取选择集的CSS类，name是类名，value是一个布尔值。布尔值表示该类是否开启，当布尔值为true时，开启对应的类，元素标签添加class="classname";当布尔值为false时，标签中不会添加任何属性。如果省略第二个参数value，返回一个布尔值，表示该类是否开启。
//四种写法 .classed("red",true); .classed({"red":true,"blue":true}); .classed("red",true); .classed("red blue",true); //省略第二个参数 .classed("red");//返回true或false -
selection.style(name[,value[,priority])
设定或获取选择集的样式，name是样式名，value是样式值。如果只保留第一个参数，则返回该样式的值。d3.select("p") .style("color","red") .style("font-size","30px"); //或者以下写法 d3.select("p") .style({"color":"red","font-size":"30px"})元素标签将添加如下属性：
<p style="color: red;font-size:30px;"></p>
-
selection.property(name[,value])
设定或获取选择集的属性，name是属性名，value是属性值。如果省略value，则返回匹配的第一个非空元素的属性值。
有部分属性不能用attr()来设定和获取，例如input的value属性，在input中输入字符test，标签中并不会添加value="test"，这种情况就要使用property()。d3.select("#fname").property("value"); d3.select("#fname").property("value","ZhangSan"); - selection.text([value])
设定或获取选择集的文本内容，如果省略value，则返回当前文本的内容。文本内容相当于DOM的innerText，不包括元素内部的标签。
<p>This <span>is</span> a 段落</p>
console.log(d3.select("p").text());//This is a 段落 - selection.html([value])
设定或获取选择集定内部HTML内容，相当于DOM的innerHTML，包括元素内部的标签。
<p>This <span>is</span> a 段落</p>
console.log(d3.select("p").html());//This <span>is</span> a 段落
3 添加、插入和删除
我们可以为选择集添加、插入和删除元素。
- selection.append(name)
在选择集的末尾添加一个元素，name为元素名称。 - selection.insert(name[,before])
在选择集中指定元素之前插入一个元素，name是被插入的元素名称，before是CSS选择器名称。 - selection.remove()
删除选择集中的元素
<body>
<p>Car</p>
<p id="plane">Plane</p>
<p>Ship</p>
<script>
var body = d3.select("body");//选择body元素
//在body元素中所有元素的末尾处添加一个p元素，内容为Train
body.append("p").text("Train");
//在body中id为plane的元素前添加一个p元素，内容为Bike
body.insert("p","plane").text("Bike");
//选择id为plane的元素
var plane = d3.select("#plane");
//删除id为plane的元素
plane.remove();
</script>
</body>