【D3.V3.js系列教程】--(三)数据绑定
1、D3可以处理哪些类型的数据
它会接受几乎任何数字数组,字符串,或对象(本身包含其他数组或键/值对)。
它可以处理JSON和GeoJSON
甚至有一个内置的方法来帮助你CSV文件中加载数据。
2、我们要做两件事:数据准备;元素选择。
- <!DOCTYPE html>
- <html>
- <head>
- <title>testD3-1.html</title>
- <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
- </head>
- <body>
- This is my HTML page. <br>
- </body>
- <script type="text/javascript">
- var dataset = [ 5, 10, 15, 20, 25 ];
- d3.select("body").selectAll("p")
- .data(dataset)
- .enter()
- .append("p")
- .text("New paragraph!");
- </script>
- </html>
<!DOCTYPE html>
<html>
<head>
<title>testD3-1.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
</script>
</html>
3、说明
d3.select("body")
查找DOM中的body和准备链中的下一个步骤的参考。
selectAll("p")
选择DOM中的所有段落。由于没有存在,这将返回一个空的选择。这个选择为空,代表段落很快就会存在。
data(dataset)
计数和分析我们的数据值。有五个值,之后我们的数据集执行了5次,每个值一次。
enter()
要创建新的数据绑定的元素,你必须使用enter() 。这个方法会在DOM中,然后被传递给它的数据。如果有更多的数据值比相应的DOM元素,然后进入() 创建一个新的占位符元素,关闭的引用到这个新的占位符链中的下一个步骤。
append("p")
以占位符enter() 到DOM中插入一个p元素。
text("New paragraph!")
将新创建的p和插入一个文本值的参考。