使用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 即可。
时间： 2024-11-05 22:13:43