版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
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!")
-
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
