D3入门系列(1)--元素选择、增删与数据绑定的基本用法
本系列参考学习自http://www.ourd3js.com 非常感谢博主的分享！
使用D3
在网页中使用D3有两种方法：
1. 下载D3.js文件后本地引用
下载地址 https://github.com/mbostock/d3/releases/download/v3.4.8/d3.zip
2. 在线引用
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
第一个程序：Hello World
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>hello world</title> 6 </head> 7 <body> 8 <p>hello world 1</p> 9 <p>hello world 2</p> 10 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 11 <script> 12 var p=d3.select("body").selectAll("p").text("hello d3"); 13 p.style("color","blue").style("font-size","72px"); 14 </script> 15 </body> 16 </html>
选择元素
选择元素有两个函数：
- d3.select()：选择所有指定元素的第一个
- d3.selectAll()：选择指定元素的全部
若要选择某一特定元素或某些部分元素，可为这些元素加ID或class属性来select结合css选择器加以选择
插入元素
插入元素有两个函数：
- append() ：在选择集末尾插入元素
- insert()：在选择集前面插入元素
Example： body.append("p") 在body的末尾添加一个p元素
body.insert("p","#myid") 在body中id为myid的元素前添加一个p元素
删除元素
删除元素的函数： remove()
Example： body.select("#myid").remove() 删除指定id的元素
数据的绑定
绑定数据的两种方法：
- datum()：绑定一个数据到选择集上
- data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
datum()
1 var str = "China"; 2 3 var body = d3.select("body"); 4 var p = body.selectAll("p"); 5 6 p.datum(str); 7 8 p.text(function(d, i){ 9 return "第 "+ i + " 个元素绑定的数据是 " + d; 10 });
得到的结果是：第0个元素绑定的数据是China 第1个元素绑定的数据是China 第2个元素绑定的数据是China
在上面的代码中，用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：
- d代表数据，也就是与某元素绑定的数据
- i代表索引，代表的应该是所选中的元素的索引号，从0开始
data()
有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。
1 var dataset = ["I like dogs","I like cats","I like snakes"]; 2 var body = d3.select("body"); 3 var p = body.selectAll("p"); 4 5 p.data(dataset) 6 .text(function(d, i){ 7 return d; 8 });
这段代码也用到了一个无名函数 function(d, i)，其对应的情况如下：
- 当 i == 0 时， d 为 I like dogs
- 当 i == 1 时， d 为 I like cats
- 当 i == 2 时， d 为 I like snakes
此时，三个段落元素与数组 dataset 的三个字符串是一一对应的，因此，在函数 function(d, i) 直接 return d 即可。
