绘制分面

分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中。

总结起来，分面其实提供了两个功能：

  • 按照指定的维度划分数据集；
  • 对图表进行排版。

对于探索型数据分析来说，分面是一个强大有力的工具，能帮你迅速地分析出数据各个子集模式的异同。

image.png

如何设置分面

  1. chart.facet(type, {
  2.   fileds: ['field1', 'field2'],
  3.   showTitle: true, // 显示标题
  4.   padding: 10, // 每个分面之间的间距
  5.   /**
  6.    * 创建每个分面中的视图
  7.    * @param view  视图对象
  8.    * @param facet facet中有行列等信息
  9.    * @return {null}
  10.    */
  11.   eachView(view, facet) {},
  12. });

说明：

  • 第一个参数 type 用于指定分面的类型；
  • fileds 属性用于指定数据集划分依据的字段；
  • eachView 回调函数中创建各个视图的图表类型；

更多配置信息，请查阅 Facet API。

分面的类型

G2 支持的分面类型如下表所示：

分面类型说明
rect默认类型，指定 2 个维度作为行列，形成图表的矩阵。
list指定一个维度，可以指定一行有几列，超出自动换行。
circle指定一个维度，沿着圆分布。
tree指定多个维度，每个维度作为树的一级，展开多层图表。
mirror指定一个维度，形成镜像图表。
matrix指定一个维度，形成矩阵分面。

rect 矩形分面

rect 矩形分面是 G2 的默认分面类型。支持按照一个或者两个维度的数据划分，按照先列后行的顺序。

image.png

实例链接：https://g2.antv.vision/zh/examples/facet/facet#rect

  1. chart.facet('rect', {
  2.   fields: ['cut', 'clarity'],
  3.   eachView(view) {
  4.     view
  5.       .point()
  6.       .position('carat*price')
  7.       .color('cut')
  8.       .shape('circle')
  9.       .style({ opacity: 0.3 })
  10.       .size(3);
  11.   },
  12. });

矩阵分面以 cut 字段划分列，以 clarity 字段划分行。

另外可以 fields 字段中设置字段名时，将行或者列值设置为 null, 就可以变成单行或者单列的分面。

list 水平列表分面

该类型分面可以通过设置 cols 属性来指定每行可显示分面的个数，超出时会自动换行。

image.png

实例链接：https://g2.antv.vision/zh/examples/facet/facet#list

  1. chart.facet('list', {
  2.   fields: ['cut'],
  3.   cols: 3, // 超过3个换行
  4.   padding: 30,
  5.   eachView(view) {
  6.     view
  7.       .point()
  8.       .position('carat*price')
  9.       .color('cut')
  10.       .shape('circle')
  11.       .style({ opacity: 0.3 })
  12.       .size(3);
  13.   },
  14. });

circle 圆形分面

image.png

实例链接：https://g2.antv.vision/zh/examples/facet/facet#circle

  1. chart.facet('circle', {
  2.   fields: ['clarity'],
  3.   eachView(view, facet) {
  4.     view
  5.       .interval()
  6.       .position('cut*mean')
  7.       .color('cut');
  8.   },
  9. });

tree 树形分面

树形分面一般用于展示存在层次结构的数据，展示的是整体和部分之间的关系。

G2 提供了 line 和 lineSmooth 两个属性，用于配置连接各个分面的线的样式，其中：

  • line，用于配置线的显示属性。
  • lineSmooth，各个树节点的连接线是否是平滑的曲线，默认为 false。

下图展示了树形多层级的分面。

image.png

实例链接：https://g2.antv.vision/zh/examples/facet/facet#tree-column

  1. chart.facet('tree', {
  2.   fields: ['grade', 'class'],
  3.   line: {
  4.     style: {
  5.       stroke: '#00a3d7',
  6.     },
  7.     smooth: true,
  8.   },
  9.   eachView(view, facet) {
  10.     view
  11.       .interval()
  12.       .position('percent')
  13.       .color('gender')
  14.       .adjust('stack');
  15.   },
  16. });

mirror 镜像分面

镜像分面一般用于对比两类数据的场景，例如男女的比例、正确错误的对比等。

通过配置 transpose 属性为 true，可以将镜像分面翻转。

image.png

实例链接：https://g2.antv.vision/zh/examples/facet/facet#mirror-transpose

  1. chart.facet('mirror', {
  2.   fields: ['gender'],
  3.   transpose: true,
  4.   padding: [0, 48, 0, 0],
  5.   eachView(view) {
  6.     view
  7.       .interval()
  8.       .position('age*total_percentage')
  9.       .color('gender', ['#1890ff', '#f04864']);
  10.   },
  11. });

matrix 矩阵分面

矩阵分面主要对比数据中多个字段之间的关系，例如常见的散点矩阵图。

image.png

实例链接：https://g2.antv.vision/zh/examples/facet/facet#matrix

  1. chart.facet('matrix', {
  2.   fields: ['SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth'],
  3.   eachView(view, facet) {},
  4. });