您的位置：首页 > Web前端 > JavaScript

【D3.js数据可视化系列教程】--（三）数据绑定

2013-09-07 16:46 651 查看

1. D3可以处理哪些类型的数据？

JS的数据类型。如数字，时间，字符串，布尔值，数组，对象等都可以。
D3自定义的数据类型。如集合（Set）,映射（Map）,嵌套（Nest）,及各种颜色空间（RGB，HSL，L*a*b，HSV）对象等
最常用的是数组，JSON。特殊的有CSV，GeoJSON数据等。

2. 如何绑定？

选择元素，绑定数据，追加元素。

<!DOCTYPE html>
<html>
<head>
<title>testD3-1.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.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. 代码解释

查找DOM中的body。

d3.select("body")

选择DOM中的所有段落。
由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。

selectAll("p")

计数和分析我们的数据值。
有五个值，之后我们的数据集执行了5次，每个值一次。注意这里data函数会绑定数据，并能够使用D3经典的E-N-E编程套路（这个以后会讲到，暂时不用关心），而另外一个数据绑定函数datum则只是替换一组新的数据。

data(dataset)

绑定数据和DOM元素。
这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。

enter()

追加元素
通过enter()创建的占位符在DOM中插入一个p元素。

append("p")

设置元素的文本
为新创建的p标签插入一个文本值。

text("New paragraph!")

4. 效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： d3 d3.js d3js 数据可视化

相关文章推荐

新的分享

章节导航