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

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

# 视图理论

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

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

对于多视图图表来说，它其实是由一棵视图树构成。视图树类似于前端开发中的 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
}

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

元组的第二个元素是一个数组，数组的每一个元素是当前区域的视图：

ViewTree[]。

接下来我们就来看代码的实现。

// src/view/view.js

import { computeFlexViews } from './flex';
import { computeFacetViews } from './facet';
import { computeLayerViews } from './layer';
import { descendants, group } from '../utils';

// 支持 4 种类型的节点
export function createViews(root, computes = {
  layer: computeLayerViews,
  col: computeFlexViews,
  row: computeFlexViews,
  facet: computeFacetViews,
}) {
  // 获得视图树的所有节点
  const nodes = descendants(root);

  // 计算根节点视图区域大小
  const { width = 640, height = 480, x = 0, y = 0 } = root;
  const rootView = { width, height, x, y };

  // 根据节点索引视图
  const nodeView = new Map([[root, rootView]]);

  for (const node of nodes) {
    const view = nodeView.get(node);
    const { children = [], type } = node;
    const computeChildrenViews = computes[type];
    if (computeChildrenViews) {
      // 计算孩子节点的区域大小
      const childrenViews = computeChildrenViews(view, node);
      if (computeChildrenViews !== computeFacetViews) {
      // 如果不是分面节点，孩子节点和计算出来的区域一一对应
        for (const [i, child] of Object.entries(children)) {
          nodeView.set(child, childrenViews[i]);
        }
      } else {
      // 如果是分面节点，将产生一些新的孩子节点
        for (const child of children) {
          for (const view of childrenViews) {
            nodeView.set({ ...child }, view);
          }
        }
      }
    }
  }

  // 将计算好的视图根据区域去分组
  const key = (d) => `${d.x}-${d.y}-${d.width}-${d.height}`;
  const keyViews = group(Array.from(nodeView.entries()), ([, view]) => key(view));
  return Array.from(keyViews.values()).map((views) => {
    const view = views[0][1];
    const nodes = views.map((d) => d[0]);
    return [view, nodes];
  });
}
// src/utils/tree.js

export function descendants(root) {
  const nodes = [];
  const push = (d) => nodes.push(d);
  bfs(root, push);
  return nodes;
}

// 使用宽度优先搜索遍历这棵树
export function bfs(root, callback) {
  const discovered = [root];
  while (discovered.length) {
    const node = discovered.pop();
    callback(node);
    discovered.push(...(node.children || []));
  }
}
// src/utils/index.js

export * from './tree';

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

# 图层（Layer）

图层（Layer）节点的孩子视图都是重合在一起的，该节点主要用于在一个区域中绘制多个几何元素，就比如如下的例子。

const temperatures = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

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

我们用折线图将上面的数据可视化得到如下的结果，可以发现在该图区域中有两种几何元素：线和点，它们的辅助元素可以简单理解为重合了。

对于如下的视图树，绘出来时如下的结果。

const viewTree = {
  type: 'layer',
  children: [{}, {}],
};

const views = createViews(viewTree);

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

它的实现非常简单，把自己的区域大小返回作为孩子节点的区域就好。

// src/view/layer.js

export function computeLayerViews(box, node) {
  const { children = [] } = node;
  return new Array(children.length).fill(0).map(() => ({ ...box }));
}

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

# 弹性盒子（Flex）

弹性盒子（Flex）节点的孩子视图在水平或者竖直方向都是充满父容器的，该概念来自于前端开发中的 Flex 布局。

该节点主要用于将区域划分为子区域，不同的子区域拥有不同的视图。该节点节点又分为两种类型：row 和 col。比如如果将上面例子中的容器类型从 layer 改成 row 的话就会得到如下的结果。

对于如下的视图树，绘出来有如下的结果。

具体的代码实现如下：

代码实现如下：

实战 视图 View|可视化专题

实战 视图 View|可视化专题

实战视图 View|可视化专题

实战视图 View|可视化专题