我们从Hello World示例代码来看D3如何做数据绑定
var demo = d3.select('body')
.selectAll('p')
.data(data, function (d) {
return d;
});
这段代码执行了以下步骤：
1、通过 d3.select('body’) 将页面上的body标签选中；
2、selectAll('p’) 返回了一个p标签的空选集(selection)；
3、空选集通过 data() 方法将数据和p标签绑定，并产生三个虚拟的子集: enter, update, exit，其中enter()包含了待绑定数据及相应的p标签的占位符，update()包含了已绑定数据的p标签， exit ()包含了待移除数据p标签，我们通过一张图来形象的理解 enter, update , exit；
enter数据
demo.enter()
.append('p')
.style('width', 0+'px')
.style('background', '#eee')
这段代码为 enter() 中的占位符创建p标签，绑定相应的数据，并初始化样式；
update数据
demo
.text(function (d) {
return d;
})
.transition()
.duration(1000)
.style('width', function (d) {
return d+'px';
})
这段代码为 update() 中的p标签写入数字文本，并绑定transition动画，使它以动画形式展现；
是不是没看到 update() 的影子，没关系，update()会被隐式调用，之所以前面要提到 update 是为了更好的理解这三种状态；
exit数据
demo.exit()
.transition()
.duration(1000)
.style('width', 0+'px')
.remove();
这段代码为 exit() 中的p标签绑定transition动画，使它以动画形式移除；
D3的这种数据绑定方式的设计，使enter()里只是专心处理新增的元素，而update 和 exit分别专注于处理更新和待删除部分，这意味着你不用把所有DOM元素删了重绘，因此得以轻松应对实时变化的数据，甚至支持一些交互(如拖动)与渐变的效果！
