Selections
select() - 通过匹配给定的CSS选择器，仅选择一个DOM元素。 如果给定的CSS选择器有多个元素，则仅选择第一个元素。
selectAll() - 通过匹配给定的CSS选择器来选择所有DOM元素。 如果您熟悉使用jQuery选择元素，则D3.js选择器几乎相同。
1、The select() method
d3.select(“div”) // 按标签选择
d3.select(“.<classname>”) // 按类名选择
d3.select(“#<id of an element>”) // 按ID选择
2、添加DOM元素
append（）方法在div标签内添加一个新标签span
text（）方法用于设置所选/附加元素的内容
d3.select("div.myclass").append("span").text("from D3.js");
3、修改元素
html（）方法用于设置所选/附加元素的html内容。
d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
attr（）方法用于添加或更新所选元素的属性。
d3.select(".myclass").attr("style", "color: red"); = .style("color", "red");
3、The classed() Method
Add class - 要添加类，必须将分类方法的第二个参数设置为true，删除需要设置为false
d3.select(".myclass").classed("myanotherclass", true);
d3.select(".myclass").classed("myanotherclass", false);
要检查是否存在类，只需省略第二个参数并传递要查询的类名。 如果存在则返回true，否则返回false。
d3.select(".myclass").classed("myanotherclass");
Data Join
数据连接的主要目的是使用给定的数据集映射现有文档的元素。
1、data()
<ul id = "list">
<li></li>
<li></li>
</ul>
给前两个元素赋值
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });
给所有的数据都显示 - enter（）方法提供对 剩余数据（未映射到现有元素）的访问
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
参数“d”提供数据元素，“i”提供数组中的数据索引
var data = [1, 2, 3];
var paragraph = d3.select("body")
.selectAll("p")
.data(data)
.text(function(d, i){
console.log("d: " + d);
console.log("i: " + i);
console.log("this: " + this);
return "The index is " + i + " and the data is " + d;
});
2、datum（）
方法用于为HTML文档中的单个元素设置值。
d3.select("p")
.datum(50)
.text(function(d) {
return "Used existing paragraph element and the data " + d + " is assigned.";
});
