G2 - The Grammar Of Graphics

分面的简介

分面即在一个绘图空间上自动摆放多张图表的方法，通过它你可以方便地展示数据的不同子集。分面可以允许用户设定哪些变量可用来分隔数据，将数据划分为多个子集后，G2 会将每个子集依次绘制到绘图空间的不同区间内。对于探索型数据分析来说，分面是一个强大的工具，能帮用户快速地分析出数据各个子集模式的异同。

在 G2 中，每一个分面都拥有自己的一份数据源、坐标轴、几何标记对象，但是共享所有的图形语法元素的配置，另外对于一张有多个分面的图表来说，只有一个图例。

分面的语法

chart.facet(dims, cfg);

说明：

dims 是用于设定进行分面切割的数据字段；
cfg 分面的配置信息，包括分面的类型，各个分面之间的间距等。如下：

chart.facet(dims, {
  type: type, 
  margin: 10
});

分面的类型

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

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

分面的配置信息

通用的配置项

属性名	说明
type	分面的类型：rect, list, circle, tree, mirror。
dims	用于分面切割的字段名，是一个数组。
margin	每个分面间的距离

rect 类型

默认分面类型。

属性名	说明
dims	指定 2 个维度作为行列，形成图表的矩阵。

$.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 类型

属性名	说明
dims	[Array]，仅支持一个变量。
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 类型

属性名	说明
dims	仅支持一个变量

$.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 类型

属性名	说明
dims	多个变量，每个维度作为树的一个层级，自动形成一棵树。
line	连接各个树节点的线的配置。
smooth	各个树节点的连接线是否是平滑的曲线。

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

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 类型

属性名	说明
dims	仅支持单个变量。
transpose	镜像是否翻转。

$.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();
});

G2 教程