简介

分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中，所有子图采用相同的图表类型，并进行了一定的设计，使得它们之间方便进行比较。

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

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

如何设置分面

chart.facet(dims, facetCfg)

分面配置有两个基本参数：一个是分面变量的设置，另一个是指定分面的类型。

说明：

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

chart.facet(['cut', 'carat'], {
  type: 'list', // 列表类型的分面
  margin: 20 // 各个分面的距离
});

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

分面的类型

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

rect 矩形分面

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

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

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

$.getJSON('../../../../../static/data/diamond.json', function(data) {
  var chart = new G2.Chart({
    id: 'c1',
    width: 800,
    height: 400,
    animate: false,
    plotCfg: {
      margin: [30, 80, 80, 80]
    }
  });
  chart.source(data);
  chart.facet(['cut','clarity'], {
    margin: 10
  });
  chart.legend('bottom'); // 设置底部图例
  chart.point().position('carat*price').color('cut');
  chart.render();
});

list 水平列表分面

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

$.getJSON('../../../../../static/data/diamond.json',function (data) {
  var chart = new G2.Chart({
    id: 'c2',
    width: 800,
    height: 400,
    animate: false,
    plotCfg: {
      margin: [30, 90, 80, 80]
    }
  });
  chart.source(data);
  chart.facet(['cut'], {
    type: 'list',
    cols: 3, // 超过3个换行
    margin: 40
  });
  chart.point().position('carat*price').color('cut');
  chart.render();
});

circle 圆形分面

$.getJSON('../../../../../static/data/diamond.json',function (data) {
  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c3',
    width: 800,
    height: 400,
    animate: false,
    plotCfg: {
      margin: [30, 90, 80, 80]
    }
  });
  chart.source(data);
  chart.facet(['clarity'], {
    type: 'circle'
  }); // 分面设置
  chart.coord('polar');
  chart.axis('cut',false); // 不显示坐标轴
  chart.axis('price',false);
  chart.interval().position(Stat.summary.mean('cut*price')).color('cut');
  chart.render();
});

tree 树形分面

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

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

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

var data = [
  {gender:'男',count:40,'class': '一班',grade: '一年级'},
  {gender:'女',count:30,'class': '一班',grade: '一年级'},
  {gender:'男',count:35,'class': '二班',grade: '一年级'},
  {gender:'女',count:45,'class': '二班',grade: '一年级'},
  {gender:'男',count:20,'class': '三班',grade: '一年级'},
  {gender:'女',count:35,'class': '三班',grade: '一年级'},
  {gender:'男',count:30,'class': '一班',grade: '二年级'},
  {gender:'女',count:40,'class': '一班',grade: '二年级'},
  {gender:'男',count:25,'class': '二班',grade: '二年级'},
  {gender:'女',count:32,'class': '二班',grade: '二年级'},
  {gender:'男',count:28,'class': '三班',grade: '二年级'},
  {gender:'女',count:36,'class': '三班',grade: '二年级'}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c4',
  width: 800,
  height: 400,
  animate: false,
  plotCfg: {
    margin: [0, 90, 80, 80]
  }
});
chart.source(data);
chart.coord('theta');
chart.facet(['grade','class'], {
  type: 'tree',
  line: {
    stroke: '#00a3d7'
  },
  smooth: true
});
chart.intervalStack().position(Stat.summary.percent('count')).color('gender');//
chart.render();

mirror 镜像分面

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

$.getJSON('../../../../../static/data/diamond.json',function (data) {
  var Stat = G2.Stat;
  var Frame = G2.Frame;
  var chart = new G2.Chart({
    id: 'c5',
    width: 800,
    height: 400,
    animate: false,
    plotCfg: {
      margin: [30, 90, 80, 80]
    }
  });
  var frame = new Frame(data);
  frame.addCol('caratGroup',function(obj){
    if (obj.carat > 1){
      return 1;
    }else{
      return 0;
    }
  });
  var defs = {
    'caratGroup': { // 由于镜像坐标系仅支持存在2个分类的字段，所以我们构建仅有2个分类的字段
      type: 'cat',
      values: ['小钻石 < 1克拉','大钻石 >= 1克拉'],
      alias: '钻石大小'
    }
  };
  chart.source(frame, defs);
  chart.legend(false);
  chart.facet(['caratGroup'],{ // 镜像分面
    type: 'mirror',
    margin: 100
  });
  chart.interval().position(Stat.summary.percent(Stat.summary.count(Stat.bin.rect('depth')))).color('caratGroup');
  chart.render();
});