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()