原文链接 http://alignedleft.com/tutorials/d3/
应该是这本书
解答我很多关于d3机理的困惑
先是06 Binding Data
代码
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
解释:
d3.select("body")
— 选择DOM中body元素,然后作为参数传给链条chain(d3是链条结构)的下一步
.selectAll("p")
—选择DOM中所有p元素 .因为此时DOM中没有任何p元素存在,这一步将会返回一个空的selection。将这个空的selection想象成即将存在的p(个人理解就是向内存申请p的空间,好为下一步存储传data做准备)
这个可能比较抽象,一时难以理解,可以看http://mbostock.github.io/d3/tutorial/circle.html
.data(dataset)
—计算和分析数据的值。由代码可知有5个data,所以在这步之后所有的事物要执行5次,对于dataset的每个值执行一次
.enter()
— enter()函数会建立一个新的有着数据绑定的元素。 enter()函数先查看DOM,然后将数据提交给DOM。然后传递给链条chain下一步
PS:如果数据的个数比对应的DOM中元素个数多,enter()函数会创建一个新的placeholder 元素来存放数据(请自行想象工作机制)。然后enter()函数吧多余数据放入placeholder元素中,然后进行链条chain的下一步。这个可能会比较困惑,有个动态图,我找不到了
.append("p")
—获得 enter()函数创建的placeholder selection ,并且把p元素插入DOM中。 然后传递给链条chain下一步
.text("New paragraph!")
—获得上一步新创建的p元素 ,然后插入text值
在chrone浏览器的的console控制台中,输入console.info(d3.selectAll("p"))
得到
一步步打开
再打开
已经将data中的数据绑定到p元素上