分面 - Facet

阅读时间约 5 分钟

分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图表矩阵的窗格中。

分面主要提供了两个功能：

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

对于探索型数据分析来说，分面是一个强大有力的工具，能帮我们快速地分析出数据各个子集模式的异同。目前 G2 内置的分面包括六种：rect、list、circle、tree、mirror 和 matrix，具体描述如下表所示：

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

除此之外，还可以通过 registerFacet 进行自定义分面。内置分面调用方式如下：

chart.facet(type: string, cfg: FacetCfg) => View

// 第一个参数用于指定分面的类型，第二个参数为 FacetCfg
chart.facet('rect', {
  fields: ['cut'], // 指定数据集划分依据的字段
});

chart.facet('rect', cfg: FacetCfg)

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

FacetCfg 配置如下：

FacetCfg.spacing

[number | string, number | string] optional

分面子图之间的横向、纵向间隔大小，百分比形式表示占 view 宽高比例，数值形式表示像素值大小。支持百分比形式和数值形式混合表示，如：

[像素值, 像素值]: [10, 20]
[像素值, 百分比]: [20, '50%']

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距，设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.fields

string[] optional

facet 数据划分维度。

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现。

type ViewCallback = (innerView: View, facet?: D) => any;

eachView(view, facet) {
  const facetData = facet.data;
  const dv = new DataView();
  dv.source(facetData).transform({
    type: 'aggregate',
    fields: ['price'],
    operations: ['mean'],
    as: ['mean'],
    groupBy: ['cut'],
  });
  view.data(dv.rows);
  view.interval().position('cut*mean').color('cut');
  view.interaction('element-active');
}

其中 FacetData 结构如下：

属性	类型	描述
type	string	分面类型
data	object[]	当前分面子 view 的数据
region	Region	当前分面子 view 的范围，Region 结构见下面
padding	number	当前分面子 view 的 padding
view	View	当前 facet 对应生成的 view
rowField	string	分面行字段
columnField	string	分面列字段
rowValue	string	当前行分面的枚举值
columnValue	string	当前列分面的枚举值
rowIndex	number	当前行索引
columnIndex	number	当前列索引
rowValuesLength	number	当前行字段的枚举值长度
columnValuesLength	number	当前列字段的枚举值长度
children	TreeData[]	只有 tree 类型分面有，树 children 数据
originColIndex	number	只有 tree 类型分面有，原始数据列 index

Region 结构如下：

interface Region {
  start: {
    x: number;
    y: number;
  };
  end: {
    x: number;
    y: number;
  };
}

FacetCfg.columnTitle

FacetTitle optional

列标题的样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

FacetCfg.rowTitle

FacetTitle optional

行标题的样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

chart.facet('list', cfg: FacetCfg)

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

FacetCfg 配置如下：

FacetCfg.spacing

[number | string, number | string] optional

分面子图之间的横向、纵向间隔大小，百分比形式表示占 view 宽高比例，数值形式表示像素值大小。支持百分比形式和数值形式混合表示，如：

[像素值, 像素值]: [10, 20]
[像素值, 百分比]: [20, '50%']

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距，设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.fields

string[] optional

facet 数据划分维度。

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现。

type ViewCallback = (innerView: View, facet?: D) => any;

eachView(view, facet) {
  const facetData = facet.data;
  const dv = new DataView();
  dv.source(facetData).transform({
    type: 'aggregate',
    fields: ['price'],
    operations: ['mean'],
    as: ['mean'],
    groupBy: ['cut'],
  });
  view.data(dv.rows);
  view.interval().position('cut*mean').color('cut');
  view.interaction('element-active');
}

其中 FacetData 结构如下：

属性	类型	描述
type	string	分面类型
data	object[]	当前分面子 view 的数据
region	Region	当前分面子 view 的范围，Region 结构见下面
padding	number	当前分面子 view 的 padding
view	View	当前 facet 对应生成的 view
rowField	string	分面行字段
columnField	string	分面列字段
rowValue	string	当前行分面的枚举值
columnValue	string	当前列分面的枚举值
rowIndex	number	当前行索引
columnIndex	number	当前列索引
rowValuesLength	number	当前行字段的枚举值长度
columnValuesLength	number	当前列字段的枚举值长度
children	TreeData[]	只有 tree 类型分面有，树 children 数据
originColIndex	number	只有 tree 类型分面有，原始数据列 index

Region 结构如下：

interface Region {
  start: {
    x: number;
    y: number;
  };
  end: {
    x: number;
    y: number;
  };
}

FacetCfg.title

FacetTitle optional

标题样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

FacetCfg.cols

number optional

指定每行可显示分面的个数，超出时会自动换行。

chart.facet('circle', cfg: FacetCfg)

以圆形分面的形式展示视图。

FacetCfg 配置如下：

FacetCfg.spacing

[number | string, number | string] optional

分面子图之间的横向、纵向间隔大小，百分比形式表示占 view 宽高比例，数值形式表示像素值大小。支持百分比形式和数值形式混合表示，如：

[像素值, 像素值]: [10, 20]
[像素值, 百分比]: [20, '50%']

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距，设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.fields

string[] optional

facet 数据划分维度。

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现。

type ViewCallback = (innerView: View, facet?: D) => any;

eachView(view, facet) {
  const facetData = facet.data;
  const dv = new DataView();
  dv.source(facetData).transform({
    type: 'aggregate',
    fields: ['price'],
    operations: ['mean'],
    as: ['mean'],
    groupBy: ['cut'],
  });
  view.data(dv.rows);
  view.interval().position('cut*mean').color('cut');
  view.interaction('element-active');
}

其中 FacetData 结构如下：

属性	类型	描述
type	string	分面类型
data	object[]	当前分面子 view 的数据
region	Region	当前分面子 view 的范围，Region 结构见下面
padding	number	当前分面子 view 的 padding
view	View	当前 facet 对应生成的 view
rowField	string	分面行字段
columnField	string	分面列字段
rowValue	string	当前行分面的枚举值
columnValue	string	当前列分面的枚举值
rowIndex	number	当前行索引
columnIndex	number	当前列索引
rowValuesLength	number	当前行字段的枚举值长度
columnValuesLength	number	当前列字段的枚举值长度
children	TreeData[]	只有 tree 类型分面有，树 children 数据
originColIndex	number	只有 tree 类型分面有，原始数据列 index

Region 结构如下：

interface Region {
  start: {
    x: number;
    y: number;
  };
  end: {
    x: number;
    y: number;
  };
}

FacetCfg.title

FacetTitle optional

标题样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

chart.facet('tree', cfg: FacetCfg)

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

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

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

FacetCfg 配置如下：

FacetCfg.spacing

[number | string, number | string] optional

分面子图之间的横向、纵向间隔大小，百分比形式表示占 view 宽高比例，数值形式表示像素值大小。支持百分比形式和数值形式混合表示，如：

[像素值, 像素值]: [10, 20]
[像素值, 百分比]: [20, '50%']

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距，设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.fields

string[] optional

facet 数据划分维度。

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现。

type ViewCallback = (innerView: View, facet?: D) => any;

eachView(view, facet) {
  const facetData = facet.data;
  const dv = new DataView();
  dv.source(facetData).transform({
    type: 'aggregate',
    fields: ['price'],
    operations: ['mean'],
    as: ['mean'],
    groupBy: ['cut'],
  });
  view.data(dv.rows);
  view.interval().position('cut*mean').color('cut');
  view.interaction('element-active');
}

其中 FacetData 结构如下：

属性	类型	描述
type	string	分面类型
data	object[]	当前分面子 view 的数据
region	Region	当前分面子 view 的范围，Region 结构见下面
padding	number	当前分面子 view 的 padding
view	View	当前 facet 对应生成的 view
rowField	string	分面行字段
columnField	string	分面列字段
rowValue	string	当前行分面的枚举值
columnValue	string	当前列分面的枚举值
rowIndex	number	当前行索引
columnIndex	number	当前列索引
rowValuesLength	number	当前行字段的枚举值长度
columnValuesLength	number	当前列字段的枚举值长度
children	TreeData[]	只有 tree 类型分面有，树 children 数据
originColIndex	number	只有 tree 类型分面有，原始数据列 index

Region 结构如下：

interface Region {
  start: {
    x: number;
    y: number;
  };
  end: {
    x: number;
    y: number;
  };
}

FacetCfg.title

FacetTitle optional

标题样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

FacetCfg.line

Line optional

设置树线条的样式。Line 配置如下：

参数名	类型	是否必选	默认值	描述
style	ShapeAttrs		-	线条样式
smooth	boolean		-	线条是否平滑

chart.facet('mirror', cfg: FacetCfg)

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

FacetCfg 配置如下：

FacetCfg.spacing

[number | string, number | string] optional

分面子图之间的横向、纵向间隔大小，百分比形式表示占 view 宽高比例，数值形式表示像素值大小。支持百分比形式和数值形式混合表示，如：

[像素值, 像素值]: [10, 20]
[像素值, 百分比]: [20, '50%']

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距，设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.fields

string[] optional

facet 数据划分维度。

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现。

type ViewCallback = (innerView: View, facet?: D) => any;

eachView(view, facet) {
  const facetData = facet.data;
  const dv = new DataView();
  dv.source(facetData).transform({
    type: 'aggregate',
    fields: ['price'],
    operations: ['mean'],
    as: ['mean'],
    groupBy: ['cut'],
  });
  view.data(dv.rows);
  view.interval().position('cut*mean').color('cut');
  view.interaction('element-active');
}

其中 FacetData 结构如下：

属性	类型	描述
type	string	分面类型
data	object[]	当前分面子 view 的数据
region	Region	当前分面子 view 的范围，Region 结构见下面
padding	number	当前分面子 view 的 padding
view	View	当前 facet 对应生成的 view
rowField	string	分面行字段
columnField	string	分面列字段
rowValue	string	当前行分面的枚举值
columnValue	string	当前列分面的枚举值
rowIndex	number	当前行索引
columnIndex	number	当前列索引
rowValuesLength	number	当前行字段的枚举值长度
columnValuesLength	number	当前列字段的枚举值长度
children	TreeData[]	只有 tree 类型分面有，树 children 数据
originColIndex	number	只有 tree 类型分面有，原始数据列 index

Region 结构如下：

interface Region {
  start: {
    x: number;
    y: number;
  };
  end: {
    x: number;
    y: number;
  };
}

FacetCfg.title

FacetTitle optional

标题样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

FacetCfg.transpose

boolean optional default: false

是否翻转，默认为 false。通过配置该值为 true，可以将镜像分面翻转。

chart.facet('matrix', cfg: FacetCfg)

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

FacetCfg 配置如下：

FacetCfg.spacing

[number | string, number | string] optional

分面子图之间的横向、纵向间隔大小，百分比形式表示占 view 宽高比例，数值形式表示像素值大小。支持百分比形式和数值形式混合表示，如：

[像素值, 像素值]: [10, 20]
[像素值, 百分比]: [20, '50%']

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距，设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.fields

string[] optional

facet 数据划分维度。

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现。

type ViewCallback = (innerView: View, facet?: D) => any;

eachView(view, facet) {
  const facetData = facet.data;
  const dv = new DataView();
  dv.source(facetData).transform({
    type: 'aggregate',
    fields: ['price'],
    operations: ['mean'],
    as: ['mean'],
    groupBy: ['cut'],
  });
  view.data(dv.rows);
  view.interval().position('cut*mean').color('cut');
  view.interaction('element-active');
}

其中 FacetData 结构如下：

属性	类型	描述
type	string	分面类型
data	object[]	当前分面子 view 的数据
region	Region	当前分面子 view 的范围，Region 结构见下面
padding	number	当前分面子 view 的 padding
view	View	当前 facet 对应生成的 view
rowField	string	分面行字段
columnField	string	分面列字段
rowValue	string	当前行分面的枚举值
columnValue	string	当前列分面的枚举值
rowIndex	number	当前行索引
columnIndex	number	当前列索引
rowValuesLength	number	当前行字段的枚举值长度
columnValuesLength	number	当前列字段的枚举值长度
children	TreeData[]	只有 tree 类型分面有，树 children 数据
originColIndex	number	只有 tree 类型分面有，原始数据列 index

Region 结构如下：

interface Region {
  start: {
    x: number;
    y: number;
  };
  end: {
    x: number;
    y: number;
  };
}

FacetCfg.columnTitle

FacetTitle optional

列标题的样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容

FacetCfg.rowTitle

FacetTitle optional

行标题的样式。

FacetTitle 配置如下：

参数名	类型	默认值	描述
offsetX	number	-	x 方向偏移
offsetY	number	-	y 方向偏移
style	ShapeAttrs	-	文本样式
formatter	(val: any) => any	-	回调配置 title 内容