# 可视化技术

在计算机学科的分类中，利用人眼的感知能力对数据进行交互的可视表达以增强认知的技术，称为可视化。它将不可见或难以直接显示的数据转化为可感知的图形、符号、颜色、纹理等，增强数据的识别效率，传递有效信息。

# JS可视化库

现阶段存在诸多可视化 JavaScript 库，较为流行的如： D3、ECharts、Antv等。下面文章将以这三个库来做简单介绍。

这三个库有共同的特点：数据驱动视图。不同于流行的 MVVM 前端框架，可视化库通常使用SVG 、Canvas 来绘制 2D 视图，使用 WebGL 来绘制 3D 视图。

# 图表入门

图表通常可以分为如下部分：

坐标轴、几何标记、图例、提示信息、辅助标记

• 坐标轴： 每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴；在极坐标轴下，则分别由角度和半径 2 个维度构成。

• 几何标记：即我们所说的点、线、面这些几何图形，几何标记的类型决定了生成图表的类型。

• 图例： 作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，用于辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。

• 提示信息： 当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

• 辅助标记： 当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记。

# 渲染引擎

2D 的图表库通常采用 SVG 或 Canvas 作为渲染引擎。ECharts 及 Antv 主要采用 Canvas 来进行图形渲染，D3 主要采用 SVG 来进行图形渲染。