自定义分面

简介

分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，可以根据一定的规则对画布的分割画布，形成多个子 View，然后在子 View 中绘制对应的数据和图形，常用于多维数据分析。

G2 的分面大概的使用方式如下：

  1. const chart = new Chart({
  2.   container: '#container',
  3.   // ...
  4. });
  6. chart.facet(facatType, {
  7.   ...facetConfig,
  8. });

目前 G2 内置的分面包括五种：

  • rect
  • list
  • matrix
  • circle
  • tree

具体的使用方式，配置数据结构，见分面文档。

如果以上内置分面无法满足自己的定制需求，那么可以尝试 G2 提供的自定义分面能力。

下面我们将介绍如何开发一个自定义分面？这包括几个部分：

  • 分面子 View 的定位逻辑
  • 自定义分面机制
  • 实现自定义分面类

子 View 定位

分面的核心逻辑是将当前 View 大小，根据数据拆分成多个子 view。

G2 中 View 可以拥有多个子 view，形成无限的嵌套逻辑。而子 View 的大小通过 region 属性来确定自身大小。类型定义如下：

  1. type Point = {
  2.   readonly x: number;
  3.   readonly y: number;
  4. };
  6. type Region = {
  7.   readonly start: Point;
  8.   readonly end: Point;
  9. };

其中 start、end 中的 x y 都是 0 ~ 1 的数字，表示子 view 的位置大小占父 view 的比例。举个例子：

  1. const region = {
  2.   start: { x: 0, y: 0 },
  3.   end: { x: 1, y: 0.5 },
  4. };

view 的 region 为以上数据的时候，那么这个 view 占整个画布空间的上半部分。

自定义分面机制

G2 提供自定义分面能力，实现并注册一个自定义分面的机制，大概如下代码：

  1. import { registerFacet, Facet } from '@antv/g2';
  3. // 实现一个自定义分面，继承 G2 分面基类
  4. class MyFacet extends Facet {
  5.   // TODO 实现自己的分面逻辑
  6. }
  8. // 注册自定义分面到 G2 中
  9. registerFacet('my-facet', Facet);
  11. // 消费自己的自定义分面
  12. const chart = new Chart({
  13.   /*...*/
  14. });
  16. chart.facet('my-facet', {
  17.   /* facetConfig */
  18. });

实现自定义分面

基于上面自定义分面机制，实现自定义分面的核心内容就是开发自定义分面类 MyFacet 。

  1. import { Datum, Facet, FacetCfg, FacetData, View } from '@antv/g2';
  3. interface MyFacetCfg extends FacetCfg {
  4.   // TODO
  5. }
  7. interface MyFacetData extends FacetData {
  8.   // TODO
  9. }
  11. class MyFacet extends Facet<MyFacetCfg, MyFacetData> {
  12.   protected afterEachView(view: View, facet: MyFacetCfg) {}
  14.   protected beforeEachView(view: View, facet: MyFacetCfg) {}
  16.   protected generateFacets(data: Datum[]): MyFacetCfg[] {
  17.     return [];
  18.   }
  20.   protected getXAxisOption(
  21.     x: string,
  22.     axes: any,
  23.     option: object,
  24.     facet: MyFacetCfg,
  25.   ): object {
  26.     return undefined;
  27.   }
  29.   protected getYAxisOption(
  30.     y: string,
  31.     axes: any,
  32.     option: object,
  33.     facet: MyFacetCfg,
  34.   ): object {
  35.     return undefined;
  36.   }
  37. }

1. 类型定义

首先定义 Facet 的配置 MyFacetCfg、分面数据的类型定义 MyFacetData。

2. 继承基类

继承 G2 提供的基类 Facet，Facet 有 5 个抽象方法必须实现，分别是：

  • beforeEachView
  • afterEachView
  • generateFacets
  • getXAxisOption
  • getYAxisOption
  • beforeEachView、afterEachView

是初始化每一个子分面 view 的时候的钩子函数，可以用来使用 G2 的 annotation 绘制一些标题等信息。

  • generateFacets generateFacets 是自定义分面的核心方法。方法返回一个分面数据的数组，每一个分面数据中包含：
  • data：分面子 view 的数据
  • region：分面子 View 的位置大小信息
  • 分面标记信息：比如 rect 中行列 index
  • 其他信息：比如 rect 中，行列的分面字段 field 等等
  • getXAxisOption、getYAxisOption

是根据每个分面来决定是否显示分面 view 中的坐标轴组件。

3. 注册使用

利用 G2 的自定义分面机制来消费使用。

  1. import { registerFacet } from '@antv/g2';
  3. // 注册
  4. registerFacet('my-facet', MyFacet);
  6. // 使用
  7. chart.facet('my-facet', MyFacetCfg);

源码参考

具体的实现逻辑，可以参考 G2 源码中 rect 分面的实现逻辑。