上一章我们聊了一系列比较抽象的统计函数，了解了它们是如何改变几何图形的位置的。这一章我们来谈谈视图，了解一下什么是视图，又该如何组合它们去搭建一个拥有很多视图的界面（如下图）。

首先我们还是从视图理论开始，然后进入实战部分，去实现几个视图组合函数，最后再进行简单的小结。那么废话不多说，我们马上进入视图的学习。

# 视图理论

在可视化中，一个完整的视图至少由两个部分构成：几何元素和辅助组件（如下图。

上面的这张图是一个单视图图表，因为它只有一个视图。而下面这张图是一个多视图图表，因为它将多个视图组合在了一起。

对于多视图图表来说，它其实是由一棵视图树构成。视图树类似于前端开发中的 DOM 树，只不过每一个节点不是一个 DOM 而是一个视图，类似的概念还有渲染引擎中的场景图（Scene Graph）。

在数据结构层面，视图树就是一个如下的嵌套对象。

const viewTree = {
  type: 'layer',
  children: [
    {
      type: 'row',
      children: [{/.../}, {/.../}]
    },
    {
      type: 'interval',
    }
  ]
};

用 TypeScript 可以如下简单定义。

type ViewTree = {
  type?: string, // 当前节点的种类
  children?: ViewTree[], // 包含的孩子节点
  [key: string]: any,
}

不同的视图节点有不同的布局方法和功能，在这里我们将实现3种视图节点：

• 图层（Layer）：type: 'layer'
• 弹性盒子（Flex）：type: 'col | row'
• 分面（Facet）：type: 'facet'

而视图这个模块要做的就是解析这棵视图树，计算出每个视图区域的位置和大小，以及在这个区域有几个视图（视图可以重叠，之后我们会看见）。

接下来我们就正式进入开发环节。

# 创建视图（createViews）

视图模块就导出一个函数：createViews(tree, computes)。

该函数有两个参数，第一个参数是一个描述视图树的嵌套对象，第二个参数是一个对象，该对象的每一个值是一个支持的视图计算函数。该函数返回一个数组，数组的每一个元素是一个元组。

元组的第一个元素是一个如下的区域的描述：

type Area = {
  x: number,
  y: number,
  width: number,
  height: number,
  [key:string]: any
}

@前端进阶之旅: 代码已经复制到剪贴板