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="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中的所有段落
由于没有存在,这个将返回一个空的选择,这个选择为空,代表段落很快就会存在,
计数和分析我们的数据值
有五个值,之后我们的数据集执行了5次,每个值一次
注意这里data函数会绑定数据,并能够使用D3经典的E-N-E编程套路,而另外一个数据绑定函数datum 则只是替换一组新的数据
data(dataset)
绑定数据和DOM元素
这个方法将数据传递到DOM,如果数据值比相应的DOM元素多,就是用enter()创建一个新元素的占位符
enter()
追加元素
通过enter() 创建的占位符在DOM中插入一个P元素
append("p")
设置元素的文本
为新创建的p标签插入一个文本值
text("New paragraph")
4 效果
This is my HTML page.
New paragraph!
New paragraph!
New paragraph!
New paragraph!
New paragraph!
+++++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="d3.js"></script> <title>demo2</title> </head> <body> <script type="text/javascript">
var data=[1,2,3,4,5];
//查找DOM下的body d3.select("body")
//选择DOM中所有的段落,如果为空 代表段落很快就会存在
.selectAll("p")
计数和分析我们的数据值,有五个值,之后我们的数据集执行了5次,每个值一次,注意这里data函数会绑定数据,并能够使用D3经典的E-N-E编程套路,而另外一个数据绑定函数datum 则只是替换一组新的数据
.data(data)
//通过enter在DOM中创建占位符,插入一个p元素
.enter().append("p")
.text(function(d){
return "i can count up to" +d;}) .style("color",function(d){//颜色样式 if(d>1){//如果大于15的颜色就是红色 return "red"; }else{ return "green"; } }); </script> </body> </html>结果:
i can count up to1
i can count up to2
i can count up to3
i can count up to4
i can count up to5