G2入门教程

G2 简介

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

特性

完善的图形语法：数据到图形的映射，能够绘制出所有的图表。

全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索。

强大的 View 模块：可支持开发个性化的数据多维分析图形。

双引擎渲染：Canvas 或 SVG 任意切换。

可视化组件体系：面向交互、体验优雅。

全面拥抱 TypeScript：提供完整的类型定义文件。

G2 设计思路

01

可视化框架的构成

数据可视化的本质是：将数据映射到图形，同时增加一些辅助信息，让用户读懂数据。

根据这一点我们可以推导出一个可视化框架需要四部分：

数据处理模块，对数据进行加工的模块，包括一些数据处理方法。例如：合并、分组、排序、过滤、计算统计信息等。

图形映射模块，将数据映射到图形视觉通道的过程。例如：将数据映射成颜色、位置、大小等。

图形展示模块，决定使用何种图形来展示数据，点、线、面等图形标记。

辅助信息模块，用于说明视觉通道跟数据的映射关系，例如：坐标轴、图例、辅助文本等。

02

G2 的框架结构

G2 实现了上面的四个模块，并且对着四个模块做了更进一步的细分，另外还针对图表交互，实现了交互语法模块。

03

数据处理模块

数据处理模块已经从 G2 中独立出来，作为 DataSet 模块单独提供，主要包含下面几个模块：

DataSet，包含多个 DataView,管理多个数据源。

DataView，每个 DataView 对应一个数据源，可以进行布局（Layout)、数据加工（Transform)。

Layout：对数据进行布局。

Transform：对数据进行加工、统计等处理，包括对地图数据的处理。

04

图形映射模块

图形映射模块完成了将数据映射到数学空间[0-1]，再从数学空间映射到画布空间的整个过程，主要包括三个模块：

Scale， 将数据映射到 0-1 之间，方便映射到画布上。

Attribute，图形属性，数据映射到图形的属性（视觉通道），包括位置、颜色、大小、形状等。

Coordinate，展示图形需用到的坐标系，将数据映射到位置的属性（视觉通道）。

05

辅助信息

辅助信息用于标示数据在各种图形属性上的映射，使得用户更容易的理解数据，主要包括下面几个模块：

Axis 坐标轴，辅助用户识别图形所在的位置，判断数据大小的辅助元素。

Tooltip 提示信息，用户鼠标在画布上移动时，实时出现的鼠标附近的数据信息。

Annotation 其他辅助元素，可以在图上添加辅助的文本、辅助图片、辅助线等，增强用户对图形的认知。

Legend 图例，辅助用户识别图形的大小、颜色、形状，通常用于判断数据对应图形的分类。

06

图形展示

Chart 图表，展示图形的入口，会生成一个画布，同时管理数据到图形映射的所有周期。

View 视图，一个画布上可以显示多张图表，每个图表有各自的绘图区域、数据源、坐标系等信息。

Geometry，数据映射到的图形标识，G2 中的图形标识有：点、线、路径、面积、多边形等。

Element，在 G2 中，我们会将数据通过图形语法映射成不同的图形，比如点图，数据集中的每条数据会对应一个点，柱状图每条数据对应一个柱子，线图则是一组数据对应一条折线，Element 即一条/一组数据对应的图形元素，它代表一条数据或者一个数据集，在图形层面，它可以是单个 Shape 也可以是多个 Shape，我们称之为图形元素。

Shape，更加细分的图形标识，例如，点可以分为圆点、正方形、十字等，线可以分为点线、折线、曲线等。

07

数据到图形映射的流程

可视化从数据映射到图形需要以下流程：

原始数据：加载到页面上的 JSON 数组。

统计分析：统计函数加工数据。

预处理数据：每个视图接收到的数据。

过滤：行过滤，列过滤（是否保存整条数据，后面讨论）。

关注数据：对数据进行行列的过滤，当前图表关注的数据。

映射：将数据从数值域转换几何属性。

绘制：调用绘图库，绘制出图形。

图形数据：最终形成的图表。

08

G2 数据转换流程

G2 的数据映射到图形的过程整体上遵循这个流程，但是细节上有所增加：

几个大的流程：

对数据进行预处理，这部分工作是在图表的外部进行的，都包含在 DataSet 包中的数据处理模块中。

图表对数据进行初步的处理，对数据进行格式化成数字、调整数据等操作。

将数据映射到数学空间[0-1] 中，然后再映射到各个图形属性，并绘制图形。

小流程的简介：

transform，DataSet 模块中可以使用多个 transform 对数据进行转换，包括过滤、补零、排序、统计、地图数据处理、地理映射等。

过滤，对数据进行过滤，可以设置一些过滤条件，控制数据的展示。

数字化，将分类类型，时间类型的数据转换成数字，为了可以执行“数据调整”,调整图形在画布上的位置。

数据调整，为了更清晰的展示数据，图形有时候需要层叠、分组、散开等，此时需要对数据进行调整 。

统一度量，度量包含了数据字段的信息，例如连续字段的最大值、最小值等信息，分类字段包含的分类，数据一旦进行调整，那么度量中的信息不再准确，所以需要进行度量的调整，同时存在多层图表的情况，例如在地图上显示点图时，这是需要多个数据源，但是用于表示位置的经纬度信息的范围必须进行统一。

归一化，将数据的值映射到数学空间 0-1 空间内，方便数据到图形属性（视觉通道）的映射。

计算图形需要的点，绘制图形时需要多个点，例如绘制一个柱状图，需要 4 个点，如果将坐标系转换，仍然是这 4 个点，仅仅是连接点的方式不同，就会生成不同的图表。

映射，将数据映射到图形空间的视觉通道。

绘制，绘制完成所有的图形。