图形属性对应视觉编码中的视觉通道,是图形语法元素中非常重要和灵活的一部分,每种几何标记都拥有自己的图形属性。F2 中支持的图形属性有下面几种:


  1. position:位置,二维坐标系内映射至 x 轴、y 轴;

  1. color:颜色,包含了色调、饱和度和亮度;

  1. size:大小,不同的几何标记对大小的定义有差异;

  1. shape:形状,几何标记的形状决定了某个具体图表类型的表现形式,例如点图,可以使用圆点、三角形、图片表示;线图可以有折线、曲线、点线等表现形式;


如何使用


首先需要明确一点:图形属性是属于每一个几何标记 geom(Geometry) 的,所以我们先要声明几何标记,然后再在该几何标记对象上进行图形属性的映射,代码如下:


chart.<geomType>().<attrType>(fields[, callback]);


其中:



除了 attr(fields[, callback]) 的函数原型外,F2 为了用户使用的便利性,结合各个视觉通道的特点,还提供了更为便捷的使用方式,在本章后面会进行详细的介绍。


语法示例:


chart.point().position('a*b').color('c');

chart.interval().position('a*b').color('c', (cValue) => {
  if (cvalue === 'fail') {
    return 'red';
  }
  return 'green';
});


F2 对于每个图形属性的参数 fields 的解析规则如下:



position 位置属性


position 位置属性的映射,用于确定由数据中的哪几个字段来确定数据在平面坐标系的位置。通俗地解释,即确定 x 轴和 y 轴的数据字段。


以下面的语句为例,在 position 属性上,映射了两个属性: 'cut' 和 'price',分别表示将 'cut' 数据值映射至 x 轴坐标点,'price' 数据值映射至 y 轴坐标点。


chart.point().position('cut*price');


color


从可视化编码的角度对颜色进行分析,可以将颜色分为亮度、饱和度和色调三个视觉通道,其中前两个可以认为是用于编码定量和定序数据的视觉通道,而色调属于编码定性数据的视觉通道。而在 F2 中并不如此详细区分,统一使用 color 方法进行映射配置。


color 支持的映射语法如下:



分类数据的颜色映射


city 属性的数据值映射至制定的颜色来区分不同的城市。


.color('city', [ '#40A9FF', '#FF7875', '#FFC069' ])



连续数据的颜色映射


对于连续的数据,我们可以为 color 指定颜色渐变的路径,以可视化数据在某一范围的变化趋势。 .color('sales', '#BAE7FF-#1890FF-#0050B3')



使用回调函数


有时候颜色需要根据字段值进行特殊的指定,所以 F2 提供了回调函数来指定图形的颜色。


// 根据单个字段计算颜色
chart.point().position('x*y').color('z', z => {
  if (z >= 100) {
    return 'red';
  }
  return 'blue';
});

// 根据多个字段计算颜色
chart.point().position('x*y').color('level*value', (level, value) => {
  if (level < 2) {
    if (value > 10) {
      return 'green';
    }
    return 'blue';
  } else {
    if (value > 20) {
      return '#cdcdcd';
    }
    return 'red';
  }
});


shape


不同的几何标记有不同的 shape(图形形状)。shape 这个视觉通道受其他几个视觉通道影响,比如:interval 几何标记的 shape 可以是填充的矩形 rect 也可是空心的边框矩形,这个就决定了是将 color 映射到填充色上还是映射到边框颜色上。shape 方法的使用方式比较简单,常用于映射分类数据:



另外 F2 提供了自定义 shape 的功能,用户可以自己绘制需要的 shape,详见自定义 shape


geom 和 shape


使用几何标记实现各种图表类型时,对于每一种几何标记来说,图形在绘制的时候有不同的形状(shape),在几何标记 章节已列出了目前 F2 提供的 geom 默认支持的 shape。


.shape('cat', [ 'circle', 'rect' ])


使用回调函数


shape 也可以通过字段值来计算,可以在 shape 方法中指定单个或者多个字段,通过回调函数返回指定的 shape。


chart.point()
  .position('x*y')
  .shape('value', (value) => {
    if (value > 10) {
      return 'circle';
    }
    return 'rect';
  });


size


对于不同的几何标记含义不完全一致:



所以从可视化的角度分析,大小(size)是一个复杂的视觉通道。


在 F2 中,支持如下几种方式的映射语法:



在气泡图中,常常使用 size 图形属性映射,用于编码更多维度的数据。如下例,使用气泡图来可视化每个国家人均国内生产总值同人均寿命之间的相关关系,同时将各个国家人口数据映射至气泡的大小。


.size('Population', [ 4, 65 ])



回调函数的使用


size可以根据数据的字段值通过回调函数计算,可以指定多个字段


chart.point().position('x*y').size('z', z => {
  if (z > 10) {
    return 20;
  }
  return z * 0.5;
});

chart.point().position('x*y').size('level*text', (level, text) => {
  if (level === 0) {
    return 50;
  }
  return text.length * 10; // 根据文本长度返回长度
});


Geom 支持的图形属性


前面提到过,每种几何标记支持的视觉通道有所差异,数据和视觉通道的映射关系也不完全相同。 下表列出了各个 geom 几何标记对各个图形属性的支持情况:

几何标记

position

color

size

shape

point

支持

支持

支持

支持

path、line

支持

支持

支持

支持

area

支持

支持

不支持

支持

interval

支持

支持

支持

支持

polygon

支持

支持

不支持

支持

schema

支持

支持

支持

支持