根据可视化场景，主体需求一般可以分成 5 种，分别是绘制基本图形、绘制基础图表、绘制关系图和流程图、绘制地理信息以及绘制三维模型和数字孪生应用。

主体需求	示例
绘制基本图形	根据数据绘制一些二维、三维的几何图形，它们不一定是完整的图表，通常是具有灵活性和视觉冲击力的小图形，例如粒子效果
绘制基础图表	通常是指绘制常见的饼图、折线图、柱状图、面积图、雷达图、漏斗图等等
绘制关系图和流程图	力导向图、树状图、流程图脑图等等
绘制地理信息	结合地图、3D 地球，对地域相关的信息进行可视化
绘制三维模型和数字孪生应用	三维建筑、人物模型，模拟整个城市、地区的真实场景

绘制基本图形的工具

简单情况下，我们用浏览器原生的四类基本图形系统就可以完成绘制，分别是 HTML/CSS、SVG、Canvas 和 WebGL。

• 如果是使用 SVG 来绘制图形，可以使用 Snap.svg (opens new window) 这个库，它提供的 API 能够非常方便地绘制各种 SVG 图形。而且它提供了一套交互式教学文档 (opens new window)，能够让你快速上手整个库的使用。

• 如果是使用 Canvas 和 WebGL 来绘制图形，比较成熟的 2D 渲染引擎包括 Fabric.js (opens new window)、Pixi.js (opens new window) 等，比较成熟的 2D/3D 引擎包括 SpriteJS (opens new window)、P5.js (opens new window) 等，以及比较成熟的 3D 引擎包括 ThreeJS (opens new window)、Babylon.js (opens new window) 等。

• 此外，使用 Canvas2D 绘制图形时，还有一个能够绘制出带有手绘风格的图形的库：Rough.js (opens new window)。

绘制图表的工具

在选择图表库的时候，我们也需要考虑底层的图形系统或图形库，这关系到复杂图表渲染和交互的性能，另外在同时需要绘制图表和基本图形的时候，选择统一的图形系统可以保持一致性，也能更好地实现图表与图形的协同交互。

• 常见的成熟图表库包括 ECharts (opens new window)、Chart.js (opens new window)、Highcharts (opens new window)、AntV G2 (opens new window)｜G2Plot (opens new window) 这 4 种。

• 如果使用 SpriteJS 作为底层图形库，可以选择 QCharts (opens new window)。

• 如果是在移动端设备渲染图表，可以考虑使用 AntV F2 (opens new window)｜F6 (opens new window)，这是一个专为移动端场景设计的图表库。

• 如果想要绘制更加灵活的图表，以及关系图和流程图，可以选择数据驱动框架，例如 D3.js (opens new window)。学习 D3.js 可以参考这篇文章：D3.js 学习之路 (opens new window)。

• 此外，Vega (opens new window) 也是一个图表库，它定义了一套基于 JSON 规范的可视化语法，以声明式的方式来绘制各种图表。最关键的是，Vega 定义可视化语法规范的思路，对我们自己设计和实现图表库有着非常大的借鉴意义。如果打算自己设计一套图表库，可以好好研究一下 Vega。

• Chartist.js (opens new window) 是一个使用 SVG 构建的简单响应式图表库。

数据驱动框架和图表库的区别

数据驱动框架和图表库的区别

因为 D3.js 这种数据驱动框架更专注于处理数据的组织形式，而将数据呈现交给更底层的图形系统（DOM、SVG、Canvas）或通用图形库（SpriteJS、ThreeJS）去完成，所以更加灵活，扩展起来也很方便。但相对地，就不像其他的图表库一样，拥有完整的封装了，使用的门槛也就相对高一些。

而 ECharts 等大部分图表库会提供封装好的图表类型，我们只需要简单配置一下参数就可以使用。但正因为如此，图表能够表现的形式也会被预设的图表类型和封装好的参数所固定了。如果我们想做一些非常个性化的视觉呈现形式，用图表库来做，相对就比较困难。

两者渲染图表的流程对比如下，左侧是图表库，右侧是数据驱动框架。

绘制关系图和流程图的工具

关系图、流程图、脑图等等这一类特殊的图表我们一般将它们单独归为一类应用，称为图可视化。

• 绘制这类图形的常见可视化库有 Mermaid.js (opens new window)、Sigma.js (opens new window) 、Antv X6 (opens new window)｜XFlow (opens new window) 以及 AntV G6 (opens new window)｜Graphin (opens new window) 等等。其中 Mermaid.js 量级更轻，主要是以声明的方式来绘制各种流程图。而 Sigma.js 和 AntV G6 的功能更丰富，实现的图可视化不仅类型更多，还能包含复杂的用户交互效果。

• 此外，还有一个特殊的库 Dagre (opens new window)。它是绘制流程图的底层库，主要是用来计算图的元素布局，使用它再结合图形库，我们就能自己实现一个绘制流程图的图可视化库。

绘制地理信息的工具

• 比较成熟的地理信息可视化库包括 MapBox (opens new window)、MapTalks (opens new window)、Leaflet.js (opens new window)、MapV (opens new window)、AntV L7 (opens new window)｜L7Plot (opens new window) 等等，它们都支持简单的 geoJSON、topoJSON 数据和分片加载的瓦片地图。

• 此外，d3 的子模块 d3-geo (opens new window) 也能够处理地理信息可视化，尤其是它提供了多种地图投影，非常适合与其他库联动，实现各种不同的地图场景应用。

• deck.gl (opens new window) 旨在简化大型数据集的高性能、基于 WebGL 的可视化。 用户可以通过组合现有图层或利用 deck.gl 的可扩展架构来满足自定义需求，从而以最小的努力快速获得令人印象深刻的视觉效果。

• CesiumJS (opens new window) 是一个 JavaScript 库，用于在没有插件的 Web 浏览器中创建 3D 地球和 2D 地图。它使用 WebGL 进行硬件加速图形，并且是跨平台、跨浏览器的，并且针对动态数据可视化进行了调整。

绘制三维模型和数字孪生应用的工具

3D 绘制一般有两种方式：

• 一种是加载静态的 3D 模型数据，然后将 3D 物体渲染出来。这些 3D 模型数据，通常是通过设计工具离线生成的。这种应用场景在游戏领域比较常见。比如使用 SpriteJS (opens new window) 加载的 3D 狐狸模型 (opens new window)。

• 另一类则是动态加载 3D 几何模型，用前面绘制基本图形的工具就可以实现。在可视化应用中，这类场景通常更普遍。比如使用 OGL (opens new window) 实现的动态加载几何图形 (opens new window)。

此外，在可视化领域中，有一类应用也会用到非常多的 3D 模型，那就是数字孪生应用。

所谓数字孪生 (opens new window)，是对物理世界实体或系统的数字化表达。简单来说，就是在虚拟世界中，通过 3D 渲染来还原真实物理世界，这需要我们将现实世界中的物体模型化为虚拟世界中的 3D 几何体。

在这样的应用场景中，有时候我们可以考虑采用游戏的方式，使用游戏引擎和框架，例如 Unity (opens new window) 或者虚幻引擎来完成我们的可视化应用。当然，这也就进入了另一个领域，游戏创作的领域了。

可视化图形库

• ThreeJS (opens new window)：一个易于使用、轻量级、跨浏览器的 JavaScript 3D 库。

• SpriteJS (opens new window)：一个跨平台的高性能图形系统，可以在 web、node、桌面应用和小程序上渲染图形，可以像操作 DOM 元素一样操作画布中的图形元素。

• ClayGL (opens new window)：一个 WebGL 图形库，用于构建可扩展的 Web3D 应用程序。

• BabylonJS (opens new window)：一个强大、美观、简单、开放的游戏和渲染引擎，封装在一个友好的 JavaScript 框架中。

• OGL (opens new window)：一个小型、有效的 WebGL 库，面向喜欢最小抽象层并有兴趣创建自己的着色器的开发人员。

• Mesh.js (opens new window)：更轻量级的图形库，以 gl-renderer 作为 webgl 渲染底层库，结合 Canvas2D 的 polyfill 做到了优雅降级。

可视化底层渲染引擎

• Skia (opens new window) 是 Chrome 和 Android 的底层 2D 绘图引擎，它采用 C++ 编程，由于位于浏览器的更底层，所以我们平常接触甚少。如果对底层绘图感兴趣，可以从这个案例 (opens new window)入手，了解 C++ 的可视化编程。

  Chrome 使用 Skia 作为绘图引擎，向上层开放了 Canvas、SVG、WebGL 和 HTML 等绘图能力。

• OpenGL (opens new window)（Open Graphics Library）是 2D、3D 图形渲染库，它可以绘制从简单的 2D 图形到复杂的 3D 景象。OpenGL 常用于 CAD、VR、数据可视化和游戏等众多领域。

• zrender (opens new window) 是二维绘图引擎，它提供了 Canvas、SVG、VML 等多种渲染方式，同时它也是 Echarts (opens new window) 的渲染器。