果果博客

D3js新闻数据可视化——总结

在11月底,终于完成了 News Data 的样式制定,期间因为搞实验室另一长期维护的项目robin 耽搁了两个周,从 边学边做 News Data  差不多用时两周,还算比较顺利。因为马上要写文档及论文,就先对整个流程进行梳理总结,以及后期又发现的一些不足和从中得到的经验教训。

前面 Year Data View 已经介绍了  News Data 包括三个视图:Year  Data View、Month Data View 和 Week Data View,每个视图的实现流程大同小异,可以看这张思维导图 http://mind42.com/mindmap/a09a9b6f-3c59-46c7-a776-953c97eadffb:

01

 

三个视图的主控制器是AppCtrl,每个视图有自己的控制器和指令,画面渲染都写在自己的控制器中,指令控制分类。AppCtrl 定义分类 $scope.categories,即全局变量,可供三个子控制器调用,且始终不变,在 week  控制器中会对分类情况进行讨论,但不影响该变量使用。

每个 ctrl 流程都是:初始页面及刷子响应 -> 点击分类响应事件 -> 点击还原响应事件 ,或者后两步并为一步。  因为后两个视图所用的分类删除及还原方法与第一个视图完全不同,Year  Data View 在将分类删除时指令建立新的分类数组通过scope.$emit(“newsRemoveClick”); 冒泡传递给控制器进行数据删除更新;而分类还原时指令将分类数组还原再冒泡传递给控制器进行数据增加更新。另外两个视图删除分类和还原分类时传递的参数相同,都是删除分类的索引组成的数组,所以当还原分类时将该数组制空即可。之所以Year  Data View  不采用这种方式,是因为数据的增删改情况不同。

year

 初始页面及刷子响应:

1、Year  Data View  :

011       012

该部分在上篇博文中介绍了部分代码的实现,可以看出,整个 focus 和 context 都是由 svg 绘制,而下面可以看出后两个视图只有 context 是 svg 绘制,focus 改用 div 显示。

2、Month  Data View  :

021       022

 

题外话:这里可以看出在处理数据上费了好些劲,都是泪啊,只因错在一开始数据结构设计太low导致,没办法,一年以来加这个项目只主导搞了两个,之前的云平台数据库设计是在夏总的帮助下才算没有留坑,这次是一拍脑袋就自己几乎分分钟定了的数据结构几乎到处是坑,最可恨的是发现是坑还在一直填,直到填满,好处是虽然走了弯路但是学到了不少东西,坏处就是数据结构不完美必然耗资源。更可恨的是已经做完了的视图且调试通过了所有功能后才发现数据结构上给自己留了这么大的坑,不过总算也想出了一套比较好的数据结构,可惜不能随便改了,牵一发而动全身,尤其是数据结构,看以后需求再定吧,都是教训……

该视图由 d3 绘制 <div>,button显示每条新闻标题及新窗口跳转链接至新闻页面,简单统计每天新闻总量,button 颜色对应分类标签颜色

3、Week  Data View  :

031       032

 

可以看出,虽然整体流程与 Month Data View 几乎一样,但是在数据处理及分类标签方面还是有所不同,数据处理由于只提取一天的数据,所以对日期的处理减少了工作量,而当新的一天到来,不可能一开始就有所有分类的新闻,所以要考虑分类标签点击无效的情况。其次就是 d3 绘图,d3 绘制 <div>,panel标题部分显示每条新闻标题及新窗口跳转链接至新闻页面,内容部分显示新闻摘要和新闻图片,简单统计每天新闻总量,panel 颜色对应分类新闻颜色。

month

点击分类及还原响应事件:

1、Year  Data View  :

013

由于数据读取是获取刷子的参数,所以在数据读取时要考虑如果从brush事件未开始(初始页面)点击分类,刷子为空,此时应定义数据范围为初始页面的数据;如果从brush事件开始后点击分类,可视化页面处理并显示刷子的数据。再者,点击分类,删除该分类下的新闻数据,所以x轴值域显示日期不变,y轴值域显示新闻总量改变,所以要重新获取y轴值域。最后d3 画图 时显示新数据减少, 用 exit() 及 remove()。

点击还原响应事件类同点击分类,不同的是数据更新时不是在原数据上增加数据,而是先remove所有数据再读取所有数据显示出来,因为删除的分类坐标还原后位置不变,会产生覆盖现象。

function type(d)定义日期处理函数,在每次数据读取时调用该函数

2、Month  Data View  :

023

 

数据读取类同 Year Data View ,在数据处理上依然采用初始页面的处理方法。由于context 和 focus 区域数据格式采用两种日期格式,function typeW(d) 和 function typeM(d) 分别针对两种日期格式定义日期处理函数,在每次数据读取时对应调用两个函数。context 新闻数量统计数据日期格式精确到日,focus 新闻细节数据日期格式精确到分钟。

在两个不同的日期格式上其实也留了一个浅浅的坑,当 context 部分由 brush 选定日期后,focus 就要对相应日期的数据过滤处理,然而,刷子在一开始设定的日期范围都是过去某一天到当前日,当前日是数据格式中新闻数量统计表格的最新日期,因为该表格定义最新日期只精确到日,默认时间就是00:00:00,而系统时间必然大于该时间,这样就导致focus选取新闻细节表格的数据会缺失,所以,考虑到当前时间并没有明天的数据,就不能单纯的把 brush 范围调整到明天,而是在focus数据选取之前把时间范围做一个简单调整:最大日期为当前日的23:59:59,(新闻的发布时间都是精确到分钟,所以该时间可以保证一天中新闻发布时间的最大值)这样既能保证brush大小未改变,又能确保数据不漏取。

3、Week  Data View  :

033

除了增加分类标签情况讨论之外,流程与Month  Data View 一样,不多说。

最后看一下指令控制的两个函数:

1、Year  Data View  :

014

2、Month  Data View  :

024

 

这两个指令差距就在参数的传递上,前者是重新定义数组,后者是修改同一个数组。开始已经说明,不再赘述。

Week  Data View 与 Month Data View  指令写法类同,不再列出。

week

 

 


上一篇:

下一篇:木有了,已经是最后一篇了

0 条评论

2014年12月4日

发表评论

*

* 绝不会泄露


返回顶部