A-A+

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

2017年04月26日 javascript 暂无评论 阅读 40 views 次

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

最生硬的方法:删除element,重新绘制;

d3.select('#svgID').remove(); //删除整个SVG d3.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;});
//删除2 var newData = [1,3,4] div = d3.selectAll('div').data(newData); //删除多余元素 div.exit().remove();

这里写图片描述

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

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

2017-04-26_174847

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: