数据可视化整体概述

一江东流水
200 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

先看一个问题：图像是怎么画出来的？ image.png

从图中可以看出，图像就是由一个一个的点组合而成，每个点代表一个色块，每个点就是对应一个颜色的二进制数据。

什么是数据可视化

数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大。

早期的产品有excel，xmind等，这类应用的特点是单机离线，数据量小、维度少

image.png image.png

后来就有些复杂的应用，比如数据大屏和数据报表，这类应用的特点是：数据量大，维度多。

image.png

数据可视化解决方案

前端数据可视化解决方案如下：

image.png

Skia是 Chrome 和 Android 的底层 2D 绘图引擎，Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少。Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML等绘图能力。

canvas

canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。

canvas绘图流程:

  1. 编写canvas标签（同时需要指定宽高）
<canvas id="canvas" width="400" height="400"></canvas>
  1. 获取canvas DOM节点
const canvas = document.getElementById('canvas')
  1. 获取canvas对象
const ctx = canvas.getContext('2d')
  1. 设置图像属性
ctx.lineWidth = 1
  1. 调用绘图API
ctx.stroke()

SVG

SVG是可缩放的矢量图形，是一种基于 XML 的图像文件格式，可直接用浏览器打开，它的特点是放大不会失真。

  1. 编写 svg 标签，指定宽高
<svg width="800" height="800"></svg>
  1. 编写 svg 绘图标签
<rect width="50" height="50"/>
  1. 编写绘图属性和样式
<rect width="50" height="50" style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"/>

对于一个使用图标icon的场景可以使用svg来绘图，但是svg也有个缺点是它是dom元素，所以它的开销比canvas大得多。比如在做一些动画的时候用svg可能会有明显的卡顿。

canvas和svg的区别：svg是一个html的标签，所以可以获取每个图形的dom元素，但是canvas是通过js来绘制完成，无法获取每个图形的dom。

WebGL

WebGL（Web Graphics Library）是一种 3D 绘图协议，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。也就是说WebGL大大扩充了canvas的边界，可以使浏览器处理更多复杂的场景。

这里简单看一下webgl如何绘制图形：

// 获取canvas元素
var canvas = document.getElementById('canvas');
// 获取绘制二维上下文
var gl = canvas.getContext('webgl');
// 编写顶点着色器和片元着色器
// 最后绘制图形

Three.js

Three.js 是一个基于 WebGL 的 Javascript 3D 图形库。

WebGL 只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。Threejs 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。总结来一句话： 就是你不懂计算机图形学，只要理解了three.js的一些基本概念就行。

zrender

zrender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

  1. 引入 zrender 库
<script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
  1. 编写 div 容器
<div id="container" style="width: 800px;height: 800px;"></div>
  1. 初始化 zrender 对象
var zr = zrender.init(document.getElementById('container'));
  1. 初始化 zrender 绘图对象
var rect = new zrender.Rect({
        shape: {
          x: 0,
          y: 0,
          width: 50,
          height: 50
        },
        style: {
          fill: 'red',
          lineWidth: 0
        }
});
  1. 调用 zrender add 方法绘图
zr.add(rect);

D3

D3（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。

Data-Driven Documents顾名思义可以知道是一个被数据驱动的文档。它可以将几乎任意数据绑定到 DOM 文档对象模型上，然后根据数据来计算对应 DOM 的属性值，以「驱动」DOM 变化。这和 JS 框架 Vue有异曲同工之妙。

D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，D3 已经将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。

echart类库局限的地方在于，基本不可定制；而D3，你说了算，你想画出什么样的图，你说了算，自由度很大。

如何用D3绘制思维导图：

image.png

avatar
文章
阅读
粉丝