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

  • 按照指定的维度划分数据集；
  • 对图表进行排版。对于探索型数据分析来说，分面是一个强大有力的工具，能帮你迅速地分析出数据各个子集模式的异同。

说明：

  • 第一个参数 dims 用于设定数据划分的维度，是数据的字段名，包含多个维度时使用数组传入；
  • 第二个参数 facetCfg，是一个对象，进行分面的配置，包括分面的类型，各个分面之间的间距等，默认采用矩形分面。

更多配置信息，请查阅 facet api 文档。

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

  1. chart.facet(['cut', 'clarity'], {
  2.   margin: 10
  3. });

分面矩阵每列按照 cut 字段划分，每行按照 clarity 字段划分。

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

  1. $.getJSON('../../../../../static/data/diamond.json',function (data) {
  2.   var chart = new G2.Chart({
  3.     id: 'c2',
  4.     width: 800,
  5.     height: 400,
  6.     animate: false,
  7.     plotCfg: {
  8.       margin: [30, 90, 80, 80]
  9.   });
  10.   chart.source(data);
  11.   chart.facet(['cut'], {
  12.     type: 'list',
  14.     margin: 40
  15.   });
  16.   chart.point().position('carat*price').color('cut');
  17.   chart.render();
  18. });

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

  • line，用于配置线的显示属性。
  • smooth，各个树节点的连接线是否是平滑的曲线，默认为 false。
  1. var data = [
  2.   {gender:'男',count:40,'class': '一班',grade: '一年级'},
  3.   {gender:'女',count:30,'class': '一班',grade: '一年级'},
  4.   {gender:'男',count:35,'class': '二班',grade: '一年级'},
  5.   {gender:'女',count:45,'class': '二班',grade: '一年级'},
  6.   {gender:'男',count:20,'class': '三班',grade: '一年级'},
  7.   {gender:'女',count:35,'class': '三班',grade: '一年级'},
  8.   {gender:'男',count:30,'class': '一班',grade: '二年级'},
  9.   {gender:'女',count:40,'class': '一班',grade: '二年级'},
  10.   {gender:'男',count:25,'class': '二班',grade: '二年级'},
  11.   {gender:'男',count:28,'class': '三班',grade: '二年级'},
  12.   {gender:'女',count:36,'class': '三班',grade: '二年级'}
  13. ];
  15. var chart = new G2.Chart({
  16.   id: 'c4',
  17.   width: 800,
  18.   height: 400,
  19.   animate: false,
  20.   plotCfg: {
  21.     margin: [0, 90, 80, 80]
  22.   }
  23. });
  24. chart.source(data);
  25. chart.coord('theta');
  26. chart.facet(['grade','class'], {
  27.   type: 'tree',
  28.   line: {
  29.     stroke: '#00a3d7'
  30.   },
  31.   smooth: true
  32. });
  33. chart.render();

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