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