什么是G2 - Weili's Blog

什么是G2?

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

就是这个样子：

引入方法

1、直接引入

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.5-beta.5/g2.min.js"></script>

2、npm功安装完成之后，import 或 require 引用

npm install @antv/g2 --save

import G2 from '@antv/g2';

const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300
});

如何使用？

创建 div 图表容器

<div id="c1"></div>

定制图表进行绘制
- 创建 Chart 图表对象，指定图表所在的容器 ID；
- 载入图表数据源；
- 使用图形语法进行图表的绘制；
- 渲染图表。

数据源
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象

// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
  container: 'c1', // 指定图表容器 ID
  width : 600, // 指定图表宽度
  height : 300 // 指定图表高度
});

// Step 2: 载入数据源
chart.source(data);

// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')

// Step 4: 渲染图表
chart.render();

可视化框架的构成

一个可视化框架需要四部分：

数据处理模块，对数据进行加工的模块，包括一些数据处理方法。例如：合并、分组、排序、过滤、计算统计信息等
图形映射模块，将数据映射到图形视觉通道的过程。例如：将数据映射成颜色、位置、大小等
图形展示模块，决定使用何种图形来展示数据，点、线、面等图形标记
辅助信息模块，用于说明视觉通道跟数据的映射关系，例如：坐标轴、图例、辅助文本等

数据处理模块

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

DataSet 包含多个 DataView, 管理多个数据源
DataView 每个 DataView 对应一个数据源，可以理解为一个图表，可以进行布局（Layout)、数据加工（Transform)
Layout 对数据进行布局
Transform 对数据进行加工、统计等处理，包括对地图数据的处理，这个很强大

图形映射模块

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

Scale 将数据映射到 0-1 之间，方便映射到画布上
Attr 图形属性，数据映射到图形的属性（视觉通道），包括位置、颜色、大小、形状等
Coord 展示图形需用到的坐标系，将数据映射到位置的属性（视觉通道）

辅助信息

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

Axis 坐标轴，辅助用户识别图形所在的位置，判断数据大小的辅助元素
Tooltip 提示信息，用户鼠标在画布上移动时，实时出现的鼠标附近的数据信息
Guide 其他辅助元素，可以在图上添加辅助的文本、辅助图片、辅助线等，增强用户对图形的认知。
Legend 图例，辅助用户识别图形的大小、颜色、形状，通常用于判断数据对应图形的分类

图形展示

Chart 图表，展示图形的入口，会生成一个画布，同时管理数据到图形映射的所有周期
View 视图，一个画布上可以显示多张图表，每个图表有各自的绘图区域、数据源、坐标系等信息
Geom 数据映射到的图形标识，G2 中的图形标识有：点、线、路径、面积、多边形等
Shape 更加细分的图形标识，例如，点可以分为圆点、正方形、十字等，线可以分为点线、折线、曲线等

数据处理模块之

数据处理分为两个大的步骤：数据连接（Connector）和数据转换（Transform）。

Connector 负责导入和归一化数据（譬如导入 CSV 数据，导入 GeoJSON 数据等）， Transform 负责进行各种数据转换操作（譬如图布局、数据统计、数据补全等）。

通过这样的分层，支持了前端社区非常全面的数据处理相关的算法和模块；其次，在单个数据视图（DataView）的基础上增加了数据集（DataSet）的概念，通过统一的 DataSet 管理，实现了各个数据视图之间的状态同步和交互。

一、DataSet

dataSet主要通过state状态管理多个dataview视图，实现多图联动，或者关联视图。 dataView则是对应的是每一个数据源，通过connector来接入不同类型的数据，通过tranform进行数据的转换或者过滤。最后输出我们理想的数据，dataSet是与g2分离的，需要用到的时候可以加载在图形映射模块上，

DataSet的使用语法

// step1 创建 dataset 指定状态量
const ds = new DataSet({
  state: {
    year: '2010'
  }
});

// step2 创建 DataView
const dv = ds.createView().source(data);

dv.transform({
  type: 'filter',
  callback(row) {
    return row.year === ds.state.year;
  }
});


// step3 引用 DataView
chart.source(dv);

// step4 更新状态量
ds.setState('year', '2012');

DataSet 主要完成了以下功能：

源数据的解析，将csv, dsv,geojson 转成标准的JSON，查看Connector
加工数据，包括 filter,map,fold(补数据) 等操作，查看 Transform
统计函数，汇总统计、百分比、封箱等统计函数，查看 Transform
特殊数据处理，包括地理数据、矩形树图、桑基图、文字云的数据处理，查看 Transform

（一）Connector

接入语法：

dv.source(data, {
  type: connectorName,   connectorName//就是下面几种数据类型
  ...otherOptions
});

可接入的数据类型：

default 默认 //普通二维数据
dsv
csv
tsv
GeoJSON //地理数据
TopoJSON //树结构数据
hierarchy
graph //图数据

可以这样理解，以上几种类型，分别对应着几种实例，可以使用该种实例提供的方法，比如GeoJSON这种类型，在制作地图时需要用到的类型，以中国地图为例，传入中国的省市名称，这个类型能根据这些地名提供对应的地理位置区域，从而画出地图中对应的区域。

（二）Transform

功能很强大，只概括几种常见的：

过滤

dv.transform({
  type: 'filter',
  callback(row) { // 判断某一行是否保留，默认返回true
    return row.year > 1998;
  }
});

数据加工

dv.transform({
  type: 'map',
  callback(row) { // 加工数据后返回新的一行，默认返回行数据本身
    row.newCol = row.xxx + row.yyy;
    return row;
  }
});

字段重命名

dv.transform({
  type: 'rename',
  map: {
    xxx: 'yyy' // row.xxx 会被替换成 row.yyy
  }
});

数据排序

dv.transform({
  type: 'sort',
  callback(a, b) { // 排序依据，和原生js的排序callback一致
    return a.year - b.year;
  }
});

percent 总和百分比

dv.transform({
  type: 'percent',
  field: 'sold',           // 统计销量
  dimension: 'year',       // 每年的占比
  groupBy: [ 'category' ], // 以不同产品类别为分组
  as: 'percent'            // 结果存储在 percent 字段
});

几个字段的意思：

field 是统计发生的字段（求和，求百分比）， dimension 是统计的维度字段，也就是”每个不同的 dimension 下， field 值占总和的百分比”， groupBy 则是分组字段，每一个分组内部独立求百分比（每一个分组内，最后的 percent 字段相加之和为 1）。

再看一下其它几个非常重要的属性：

Scale 度量

定义：度量 Scale，是数据空间到图形空间的转换桥梁，负责原始数据到 [0, 1] 区间数值的相互转换工作，从原始数据到 [0, 1] 区间的转换我们称之为归一化操作。不同的数据类型对应不同的度量，如

连续数据类型，如 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 一组数据，在其原始数值范围 [0, 10] 内通过度量转换至 [0, 1] 范围的数据，变成 0, 0.1, 0.2, …, 0.9, 1，同时通过 invert 反转，还需要度量后的数值恢复至原始值；
分类数据类型，如 [‘男’, ‘女’] 这一组数据，通过度量转换后变成 [0, 1]，同样时通过 invert 反转可恢复至原始值。

在 G2 中度量用于完成以下功能：

将数据转换到 [0, 1] 范围内，方便将数据映射到位置、颜色、大小等图形属性；
将归一化后的数据反转回原始值。例如分类a 转换成 0.2，那么对应 0.2 需要反转回分类a；
划分数据，用于在坐标轴、图例显示数值的范围、分类等信息。

Scale 的功能非常简单易理解，但是在 G2 的数据处理流程中起着非常重要的承接作用，

根据数据分类方式，G2 提供了不同的度量类型：

数据类型	度量类型
连续	linear、log、pow、time
分类（非连续）	cat、timeCat

对于 G2 生成的所有度量对象，均拥有以下属性，这些属性均可以由用户进行配置。

{
  type: {string}, // 度量的类型
  range: {array}, // 数值范围区间，即度量转换的范围，默认为 [0, 1]
  alias: {string}, // 为数据属性定义别名，用于图例、坐标轴、tooltip 的个性化显示
  ticks: {array}, // 存储坐标轴上的刻度点文本信息
  tickCount: {number}, // 坐标轴上刻度点的个数，不同的度量类型对应不同的默认值
  formatter: {function}, // 回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴、图例、tooltip 上的显示
}

默认生成度量的机制如下：

查看用户是否制定了对应字段的数据类型，查看列定义
如果没有，判断字段的第一条数据的字段类型
如果数据中不存在对应的字段，则为 ‘identity’
如果是数字则为 ‘linear’；
如果是字符串，判定是否是时间格式，如果是时间格式则为时间类型 ‘time’,
否则是分类类型 ‘cat’

度量中的每个类型的定义，这里只说个大概，具体看官网上的解释吧。

图表的组成

坐标轴 axis

通常包含两个坐标轴，在笛卡尔坐标系下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径2个维度构成。每个坐标轴由坐标轴线、刻度线、刻度文本、标题以及网格线组成。

图例 legend

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

几何标记 geom

几何标记，即我们所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现，不同的几何标都对应自己能识别的图形属性。

G2 的核心既是将数据从数据空间转换到图形空间。

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

辅助标记 guide

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

G2的dom结构也是canvas

它是由三层 canvas 构成的，这三层 canvas 分别对应 chart 对象的如下三个属性：

frontCanvas 最上层 canvas，图例 legend、提示信息 tooltip、和 text tag html 这三种类型的辅助标记 guide 在这一层绘制；
canvas 中间层，绘制图表的主体内容几何标记 geom；
backCanvas 最下层 canvas，坐标轴 axis 和 line image rect arc 这四种类型的辅助标记 guide 在这一层绘制。