D3.js 动态数据刷新视图详解

在官网有着丰富demo的基础上，使用d3绘制一副静态图表并不是难事。但我们更多的需求是：根据用户操作动态获取数据库中数据，进而刷新视图。

最生硬的方法：删除element,重新绘制；

d3.select('#svgID').remove();   //删除整个SVGd3.select('#svgID')  .selectAll('*')  .remove();                    //清空SVG中的内容

此方法的确可以做到刷新视图的效果。
优点：快准狠！
缺点：
1. 不能实现友好的动画切换效果
2. 不能保留之前用户操作的状态

正确打开方式：利用enter/exit更新视图

先理解enter/exit 二者的作用

---

如上图所示，简而言之，enter（）是数据超出部分，exit（）是图形多余部分。
值得注意的是，var div = d3.selectAll('div');其中div是当前存在的div。

所以更新步骤为：

1. 对已存在的div我们要做的是update操作。
2. 对空缺的enter()部分做补充操作。
3. 对多余的exit()部分执行.remove()。
4. 对更改的动作添加动画效果，使刷新更酷炫！

ps: update操作是指根据数据刷新视图中的图形以及文字。

问题1：如果是从DATA（数组）中删除数据，其他数据不变，那么是否需要刷新操作。
问题同：在删除数据的时候，为什么界面中的图形在“乱跑”o(╯□╰)o。
解答：必须要！下文介绍一下d3的data()

---

#正确理解d3.js中.data(),数据与视图绑定原理。

d3.js中的.data()是元素集合与数据集合的映射。如下图所示：

我们可以看到图中的div2此时对应的数据应该是data3,视图与数据不一致，所以需要更新视图。

假设我们做的是如下代码的数据更新

var data = [1,2,3,4];var div = d3.selectAll('div').data(data);div.enter()   .append('div')   .text(function(d){return d;});

//删除2var newData = [1,3,4]div = d3.selectAll('div').data(newData);//删除多余元素div.exit().remove();

可以发现元素被删除的不是我们所期望被删除的元素。我们删除数据2的时候，使用exit()删除的元素却是队列的最后一个元素。

所以建议将刷新视图封装为方法，方便随时调用。