首页 > 代码库 > D3基础---简介和数据
D3基础---简介和数据
D3.js是一种数据操作类型的javascript库（也可视其为插件）；结合HTML,SVG和CSS，D3可以图形化的，生动的展现数据。
d3获取：http://d3js.org/
在代码文件中引入D3：
<script type="text/javascript" src="http://www.mamicode.com/d3.v3/d3.v3.js"></script>
添加元素语法：
d3.select("body").append("p").text("New paragraph!");
说明：选择body标签，为之添加一个p标签，并设置它的内容为New paragraph！
你可以将链接选择换行，这样代码结构更清晰：
1 d3.select("body") 2 .append("p") 3 .text("New paragraph!");
还可以避免使用链接语法（这个一般不会用上）：
1 var body = d3.select("body"); 2 var p = body.append("p"); 3 p.text("New paragraph!");
D3可以处理哪些类型的数据
它会接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对）。
它可以处理JSON和GeoJSON
甚至有一个内置的方法来帮助你CSV文件中加载数据。
我们要做两件事：数据准备；元素选择。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>testD3-1.html</title> 5 <script type="text/javascript" src="d3.v3.js"></script> 6 </head> 7 8 <body> 9 This is my HTML page. <br> 10 </body> 11 <script type="text/javascript"> 12 var dataset = [ 5, 10, 15, 20, 25 ]; 13 d3.select("body").selectAll("p") 14 .data(dataset) 15 .enter() 16 .append("p") 17 .text("New paragraph!"); 18 </script> 19 </html>
说明：
d3.select("body")
查找DOM中的body和准备链中的下一个步骤的参考。
selectAll("p")
选择DOM中的所有段落。由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。
data(dataset)
计数和分析我们的数据值。有五个值，之后我们的数据集执行了5次，每个值一次。
enter()
要创建新的数据绑定的元素，你必须使用enter() 。这个方法会在DOM中，然后被传递给它的数据。如果有更多的数据值比相应的DOM元素，然后进入（） 创建一个新的占位符元素，关闭的引用到这个新的占位符链中的下一个步骤。
append("p")
以占位符enter() 到DOM中插入一个p元素。
text("New paragraph!")
将新创建的p和插入一个文本值的参考。
使用数据
说明：
用一个d表示当前数据值。
可以使用一个匿名函数处理这个数据。
接上面一个例子可以显示数据值，还可以根据数据值来修改颜色值做不同的数据呈现。
示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>testD3-3.html</title> 6 <script type="text/javascript" src="d3.v3.js"></script> 7 </head> 8 <body> 9 <script type="text/javascript"> 10 11 var dataset = [ 5, 10, 15, 20, 25 ]; 12 13 d3.select("body").selectAll("p") 14 .data(dataset) 15 .enter() 16 .append("p") 17 .text(function(d) { 18 return "I can count up to " + d; 19 }) 20 .style("color", function(d) { 21 if (d > 15) { //Threshold of 15 22 return "red"; 23 } else { 24 return "black"; 25 } 26 }); 27 28 </script> 29 </body> 30 </html> 效果：
参考书籍：《数据可视化实战》