D3选择、插入、删除元素
d3.select()：是选择所有指定元素的第一个 d3.selectAll()：是选择指定元素的全部
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Apple</p>
<p id="second">Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// 选择所有的p元素
// var body = d3.select("body");
// var p = body.selectAll("p");
// 选择第一个p元素
// var p1 = d3.select("p");
// p1.style("color", "red");
// 选择第二个p元素
// var p2 = d3.select("#second");
// p2.style("color", "red");
// 在 body 中 id 为 second 的元素前添加一个段落元素。
// var body = d3.select("body");
// body.insert("p", "#second")
// .text("insert p element");
// 删除元素
var body = d3.select("body");
var p = body.select("#second");
p.remove();
</script>
</body>
</html>
D3绑定数据
D3 中是通过以下两个函数来绑定数据的：
- datum()：绑定一个数据到选择集上
- data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
相对而言，data() 比较常用。
datum（）
<body>
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
// d 代表数据，也就是与某元素绑定的数据。
// i 代表索引，代表数据的索引号，从 0 开始。
p.text(function (d, i) {
return "第 " + i + " 个元素绑定的数据是 " + d;
});
</script>
</body>
其结果如下：
第 0 个元素绑定的数据是 China 第 1 个元素绑定的数据是 China 第 2 个元素绑定的数据是 China
data()
有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。
var dataset = ["I like dog","I like cat","I like snake"];绑定之后，其对应关系的要求为：
- Apple 与 I like dog 绑定
- Pear 与 I like cat 绑定
- Banana 与 I like snake 绑定
调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset = ["I like dog","I like cat","I like snake"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d,i){
return d;
})
</script>
</body>
</html>
结果如下：
I like dog I like cat I like snake