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

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.js数据可视化系列教程】--(三)数据绑定_第1张图片


你可能感兴趣的:(d3,d3.js,D3JS,数据可视化)