D3.js学习记录【转】【新】

时间 2019-11-13

原文原文链接

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>D3学习记录</title>
 6     
 7     <style>
 8     
 9     .chart{
10         background-color: #3498db;
11         text-align: right;
12         padding: 3px;
13         margin: 1px;
14         color: white;
15     }
16     
17     </style>
18     <!-- 导入D3.js -->
19     <script src="js/d3.v3.min.js"></script>
20     
21 </head>
22 <body>
23     <script>
24     //create a data
25     var data = [4, 8, 5, 2, 10, 20];
26     
27     //建立一个容器
28     var chart = d3.select("body")//选择元素
29                     .append("div")//建立并添加新元素到选定元素后
30                     .attr("class", "chart");//设置或获取指定属性
31     //向容器中添加几个div元素
32     chart.selectAll("div")//选择该元素的多个子元素组成元素集
33             .data(data)//设置或获取一组元素的绑定数据dataSet
34             .enter()//返回一个新的绑定了数据的元素
35             .append("div")
36             .style("width", function(d){
37                 return d*10 + 'px';
38             })
39             .text(function(d){
40                 return d;
41             })
42     </script>
43 </body>
44 </html>

D3.js也是一个javascript框架，像jquery同样，只不过他的特长是在数据可视化这一块而已。因此不要以为D3是多么的复杂。在上面的代码中咱们能够看到D3的一些用法：javascript

　　选择元素：d3.select(“element”)，这个就是jquery中的$()，只不过没有采用简写的形式。html

　　建立并添加新元素到选定元素后：.append("element")，就是javascript中的append方法同样，他返回的是一个添加了该新元素的元素集。java

　　设置或获取指定属性：.attr(name[, value])，同jquery中的attr()。jquery

D3.js采用的是像jquery中的链式方法，在执行一个操做后能够继续调用其余的方法，可是，咱们须要注意的是，前一个方法的输出类型必需要和下一个方法的输入类型相匹配！app

　　选择所选的元素中的多个子元素组成新的选择集:selectAll("obj")，建立一个selection，这样咱们能够往里面填充数据。不过如今的选择集尚未插入到文档，由于咱们还要给这些空的选择集加入数据，框架

　　设置或获取一组元素的绑定数据：.data(dataset)，这样selection分配数据了，D3会根据数据来进行合理的分配，分配好了，这些selection下一步该插入到文档中了，学习

　　返回一个新的、绑定了数据的元素：.enter()，这样子咱们的以前建立的election就能够使用了。他们在DOM中有了本身的位置，咱们终于能够往他身上进行操做了！ui

　　设置HTML属性：.attr()spa

　　设置CSS样式：.style()code