AntV/F2使用记录

全篇共 2004 字。按500字/分钟阅读,预计用时 4.0 分钟。总访问 629 次,日访问 4 次。

在AntV/F2文档看到“视觉通道”这个词,并非第一次看到这词,但却是让我对数据可视化思考更深入的一次。延伸开来,数据除了可以被视觉化,其他的感官呢。听觉、触觉、味觉、嗅觉都可以和数据发生奇妙的映射反映。数据可被一切艺术化,更像是数据+新媒体艺术碰撞的火花。

现在,开源的库那么多,使用一个库,不单单是停留在把API用的得心应手。这个库,在其他方面,能给我带来何种更有延伸价值的启发,才是我更加看重他的地方。比如,设计思想等。过去,看山就是山,看水就是水,现在,看山不单看山,看的是仁厚待人是连绵不断,看水也不再是水,看的是水滴石穿是审时度势。

文档提到《The Grammar of Graphics》(Leland Wilkinson 著)这本书,未来是一定要买来看的。我赞同“没有具体的图表类型的概念,所有的图表都是通过组合不同的图形语法元素形成的”这句话。Airglass.js最初的目的也是如此。

文档中的某些概念,撰写者没有表达清楚,也存在错别字和歧义处,这些我非常理解,就像大人有时搞不定自己的小孩,因为大人们怕是已经忘了当自己还是小孩子时的心境了。文档的撰写者,怕是对库的了解太过深入撰写的太过忘情。这些都只是我个人的直观感受。

反复的阅读文档加上代码实践,渐渐把一些概念理解清楚了。本篇想法,记录我对文档中一些概念、API的理解。

AntV/F2数据结构

结构化的数据,其中各个字段值穿过视觉通道映射至图形属性。特殊的图表对数据的结构有特殊的要求。
文档中提到,针对饼图、区间柱状图和股票图,对数据结构有特殊要求。

文档中提到了三种对数据结构有特殊要求的图表。在说明生成饼图的数据结构时提及"常量"一词。
饼图,每条记录中都应有一个字段用来存储常量,并且该常量须为字符串。
比如上图中,绘制饼图的数据,每一条记录的字段’a’的值都是字符串’1’。
换句话说,字段’a’在每一条记录中的值都相同,所以是常量。

F2 图形语法的核心就是建立从数据中一系列变量到图形属性的映射。
F2概括了四种视觉通道,分别是位置、颜色、大小和形状。
颜色通道可以再细分出色相、明度和饱和度三个视觉通道分别代表数据的三个维度。文档提到F2并没有再将颜色细分。

位置、颜色、大小、形状四大视觉映射通道

图形属性是属于每一个几何标记 geom(Geometry) 的,所以先要确定几何标记,然后再在该几何标记对象上进行图形属性的映射。

点、线、面、路径等几何标记

创建好Chart实例后,首先指定图表的几何标记,然后再设置四个视觉通道。
下面是指定几何标记的语法,我把所有的几何标记都罗列了出来。
下面每一行执行后都返回一个Geometry实例。

chart.point();
chart.line();
chart.area();
chart.polygon();
chart.path();
chart.schema();
chart.interval();

每一个Geometry实例上都可调用设置四个视觉通道的方法。
拿point这一几何标记为例。

chart
  .point()
  .position(...)
  .color(...)
  .size(...)
  .shape(...);

四个视觉通道的设置不分先后,且不必都设置。
除了设置视觉通道的四个方法,还有用来微调的adjust()、设置绘图样式的style()、设定动画的animate()方法。

chart
  .point()
  .position(...)
  .color(...)
  .size(...)
  .shape(...)
  .adjust(...)
  .style(...)
  .animate(...);

用颜色区分系列,或者用形状通道区分。
此两者比位置或大小区分系列易于理解。

interval几何标记自定义形状

上方左图是最常见的柱状图,创建这样的图表只需要一个系列的数据。
下面的数据中存在两个系列。文档提到Interval这一几何标记内置的形状类型是rect,于是我又创建了适用于Interval的自定义的环形形状,系列1和系列2的数据分别映射至这两个形状。

chart.source([
  { a: 'a', b: 12, c: '系列1' },
  { a: 'b', b: 23, c: '系列1' },
  { a: 'c', b: 29, c: '系列1' },
  { a: 'd', b: 19, c: '系列1' },
  { a: 'e', b: 39, c: '系列1' },
  { a: 'f', b: 32, c: '系列1' },
  
  { a: 'a', b: 17, c: '系列2' },
  { a: 'b', b: 27, c: '系列2' },
  { a: 'c', b: 39, c: '系列2' },
  { a: 'd', b: 26, c: '系列2' },
  { a: 'e', b: 46, c: '系列2' },
  { a: 'f', b: 38, c: '系列2' },
]);

F2创建自定义形状,由于形状视觉通道和其他三个视觉通道一样属于某一几何形状的,
所以在创建自定义形状时,首先需要指定该形状属于哪个几何形状。

颜色通道自由选择映射的数据

此处本应记录我对F2如何创建几何形状的理解。文档对这部分的介绍详尽,这里不再赘述。

原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2019年12月22日 周日
更新日期 » 2020年1月11日 周六
上一篇 » 文章目录速查
下一篇 » 记录博客搜索想法功能实现过程
:)记录下你此刻的想法~
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录