文档章节

用科学的方法展示最形象的图表——前端数据可视化实践

岂安科技
 岂安科技
发布于 2016/11/30 18:11
字数 1632
阅读 41
收藏 3

 

前言

也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题。

需求

那么,在我们的项目中是如何实现数据可视化的呢?下面以这样一个需求开始我们的讲解:我们需要向用户展示目前用户产品的风险情况,有没有风险产生、产生于何地、是否被拦截等信息。

最终效果图:

用最科学的方法展示最形象的图表——前端数据可视化实践

技术选型

说到数据可视化,可谓是百花齐放,一时之间前端界出现了琳琅满目的第三方库: Highcharts , Echarts , Chart.js , D3.js 等。但是,万变不离其宗。

总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。

SVG Canvas
不依赖分辨率 依赖分辨率
支持事件处理器 不支持事件处理器
最适合带有大型渲染区域的应用程序(如地图) 弱的文本渲染能力
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 能够以 .png 或 .jpg 格式保存结果图像
不适合游戏应用 最适合图像密集型的游戏
可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。 一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景都需要重新绘制。

通过各种比较之后,我们最终选择基于 D3.js 进行开发。

为什么不选用更加丰富的图形库,比如 Echarts ?

——数据可视化看似简单,但其中蕴含的科学可谓博大精深。

Echarts 提供的图表的确可以满足大部分的需求,遵循了数据可视化的一些经典范式。然而,每个不同的行业对于数据可视化都会有一些定制化的需求,希望能以一些带有行业特征的图表向使用者展示数据背后隐藏的秘密。

因此,我们希望可以使用一个比较基础的图形库,这个库对一些基础算法进行了封装。然后在此基础之上,我们可以进行二次开发,定制适合的图表向用户展示更有针对性的数据。

为什么不选用基于 Canvas 的库?

——我们的应用存在大量的用户交互场景。

在 Canvas 中,如果要为细粒度的元素添加事件处理器,必须涉及到边缘检测算法,无疑为开发带来了一定的难度,同时,采用这种方法并不一定精确。相比之下,SVG 是基于 DOM 操作的,支持更精确的用户交互,无疑更适合我们这样一个小规模的团队。

所谓成也萧何败萧何。这里的萧何源于 SVG 是基于 DOM 操作的。

众所周知,频繁的 DOM 操作十分消耗性能。对于用户体验的影响便是可能出现闪烁、卡顿等现象。幸好,伟大的前端界对于这个问题已经有了解决方案: Virtual DOM 技术。

所以我们要做的,就是选择一个支持 Virtual Dom 技术的框架与 D3.js 结合使用。同时,我们的最终目标是将这些图标封装成可复用的组件。

因此,最终我们选择了 facebook 出品的 React 。这是一个相对轻量、简单、专注于 View 的库。

实际问题

细心的读者一定会提出这样一个问题:既然是一个实时数据展示图表,如何做到如此频繁且流畅地渲染大量数据?其实很简单,关键在于把握以下两个阶段:

1. 数据的获取。

在这里,我们主要还是采用了客户端主动轮询拉取的方式。只要选定了采样频率,剩下的就是每隔一段时间从服务器拉取数据了。

当然,这种方式的缺点也显而易见:由于延时造成的数据滞后,并且随着时间的推移,这种滞后会越来越严重。

为了解决这一问题,我们会在一段时间之后进行数据实时性的校正。

2. 数据的渲染。

需求中,攻击情况需要依据时间顺序进行展示,表现为一条从攻击源到攻击目标的运动轨迹。如果一段时间内产生了大量的攻击,那么页面中的 DOM 元素会迅速增加,渲染速度变慢,出现卡顿现象。

为了解决这一问题,当每一条运动轨迹展示完毕的时候,相应的 DOM 元素会被及时销毁。当更大量的攻击产生时,我们会控制展示的数量,同时发出警告,因为这明显已经属于一种攻击非常极端的情况了。

未来展望

事实上,对于实时数据的处理,前文所述的方法并不是最佳实践,只能说是一种降级方案。我们的长远目标是要做到真正的实时数据展示,因此下一步我们会实时数据推送技术,敬请期待。

用最科学的方法展示最形象的图表——前端数据可视化实践

岂安 Warden 2.0 监控屏

大数据时代,前端也迎来了新的挑战。数据可视化已然成为了新的风向标。数据团队的前端要做的就是:用最科学的方法向用户展示最形象的图表,而这,也是我们前行的目标。

作者简介

张静 岂安科技前端架构师 

三年互联网前端开发经验,曾参与多个大型应用的前端开发,负责岂安科技产品的前端架构设计与开发。

岂安科技求Java研发大师加入

你会感兴趣的内容:

简易构建合适风控系统的IP库

十分钟解决爬虫问题!超轻量级反爬虫方案 

浅谈如何利用ip数据来辅助风控和安全系统

© 著作权归作者所有

岂安科技
粉丝 0
博文 4
码字总数 8720
作品 0
长宁
私信 提问
「用数据讲故事」读书笔记

date: 2017-10-20 12:16:07 title: 「用数据讲故事」读书笔记 用数据讲故事 - 百度脑图: http://naotu.baidu.com/file/21fbd80831ec6a2ebe8138ce82f7ecf4?token=ced3ed62c70a6ad1 用数据讲故......

daydaygo
2017/10/20
0
0
业界 | 数据可视化项目失败的六大缘由

     大数据文摘作品   编译:汪小七、惊蛰、蒋宝尚   一张图片最大的价值在于它让我们注意到了我们从来不奢望看到的景象。   ——John W.Tukey   在文章开篇之前,文摘菌引用J...

大数据文摘
2018/05/19
0
0
为何需要可视化: 信息到智慧的升华

掌握的专业知识越多,需要学习的也越多,我承认自己懂得的还远远不够……当你坦诚自己还不懂时,才更迫切地想问为什么,才能更好地学习。 ——Richard Sual Wuraman,《渴望知识2》(Informa...

生气的散人
2014/12/19
287
1
大数据时代数据可视化的概念研究

本文基于对DT时代下数据可视化概念进行解读与分析。在大数据时代大背景下,作为前端工程师,接触数据,使用数据,分析数据的次数会越来越多,开发数据可视化的应用也会越来越多。不管是使用E...

Perkin_
2018/04/02
0
0
这16个数据可视化案例,惊艳了全球数据行业

作者:蘑菇君 数据可视化可以帮你更容易的解释趋势和统计数据。 数据是非常强大的。当然,如果你能真正理解它想告诉你的内容,那它的强大之处就更能体现出来了。 通过观察数字和统计数据的转...

op07p6aaqo9u71
2017/12/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部