D3.js学习记录【新】

 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的一些用法:

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

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

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

D3.js采用的是像jquery中的链式方法,在执行一个操作后可以继续调用其他的方法,但是,我们需要注意的是,前一个方法的输出类型必须要和下一个方法的输入类型相匹配!

  选择所选的元素中的多个子元素组成新的选择集:selectAll("obj"),创建一个selection,这样我们可以往里面填充数据。不过现在的选择集还没有插入到文档,因为我们还要给这些空的选择集加入数据,

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

  返回一个新的、绑定了数据的元素:.enter(), 这样子我们的之前创建的election就可以使用了。他们在DOM中有了自己的位置,我们终于可以往他身上进行操作了!

  设置HTML属性:.attr()

  设置CSS样式:.style()

你可能感兴趣的:(js)