【备战春招】第14天 数据可视化，打造前端差异化竞争力 第三讲

课程名称： 数据可视化入门到精通-打造前端差异化竞争力

课程章节： 数据可视化前端技术选型（上）【不知道什么是可视化？看这里就对了】

主讲老师： Sam

课程内容：

今天学习的内容包括：

前端可视化解决方案、 webgl 技术分享

课程收获：

3.1 心得：

可视化建模最核心的需求就是画一个图形学上的图。要么是根据用户给定的数据结构展示成可视化的图形（用svg、canvas、html+css或者混用）；要么是经过用户和系统的一系列交互，画出可视化图形后，可以生成相应的数据结构。

前端做可视化图形可以用svg、canvas、html+css或者混用。其中，svg（或者混用html）是在这个可视化细分领域最常用的技术。因为svg里的Shapes刚好对应图里的顶点，而Paths可以对应图里的边。从实现上，svg里也有g元素可以实现画布、分组；text元素可以实现标签。甚至可以通过foreignObject内嵌html来实现复杂的顶点样式定制。事实上，上文的图正是用svg画出来的。目前应用svg实现前端建模的产品、框架很多，譬如： IBM的开源项目Node-RED 图形布局库dagre-d3 图形布局库cola.js 开源画图库Joint 开源画图库jsPlumb 开源框架AlloyUI的画图工具 商业画图库mxGraph 商业画图库Draw2D 微软的机器学习平台上的建模工具Azure-ML 使用canvas的相对少一些，
比较出名的有: GoJS JS Graph Springy 技术方案 如果只使用最基础的svg、canvas，不借助画图库的情况下，实现可视化建模是一件相当复杂的事情。这就是为什么上述列举的前端建模产品或者工具库除了Node-RED和AlloyUI暂未商业化以外，要么是闭源的（Azure-ML/mxGraph/Draw2D/GoJS/JS Graph），要么只是某个商用协议产品的社区开源版（Joint/jsPlumb），要么已经不维护了（dagre-d3）。

具体做技术选型时有这几个建议：

个人项目可以尝试优秀的商业解决方案，体会这些强大的产品的设计
如果只有简单的模型展示功能，建议选用dagre-d3、Springy这样的，带自动布局、带渲染器的简单方案
如果有交互式建模的需求，但又不求深入定制，那可以根据开发者熟悉的技术栈选择Joint/jsPlumb/Alloy-UI等方案之一
如果有深入定制建模工具的需求，而且预算充足，建议和ProcessOn一样，选择mxGraph。如果同等条件又偏好canvas，则可以考虑GoJS
有深入定制建模工具的需求，又不允许使用商业产品，那么只剩下以下选择
基于Joint做二次开发
基于D3、raphael、svg.nap等实现一个可视化建模工具
从0开始，实现一个可视化建模工具

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

WebGL和3D图形规范OpenGL、通用计算规范OpenCL一样来自Khronos Group，而且免费开放，并于2010年上半年完成并公开发布。Adobe Flash Player 11、微软Silverlight 3.0也都已经支持GPU加速，但它们都是私有的、不透明的。WebGL标准工作组的成员包括AMD，爱立信，谷歌，Mozilla，Nvidia以及Opera等，这些成员会与Khronos公司通力合作，创建一种多平台环境可用的WebGL标准，WebGL标准在2011年上半年首度公开发布，该标准完全免费对外提供。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的