【D3.js 学习总结】2、D3数据绑定

我们从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元素删了重绘，因此得以轻松应对实时变化的数据，甚至支持一些交互(如拖动)与渐变的效果！