上一章介绍了辅助组件（Guide）相关的知识，聊了坐标轴、图例的本质和绘制方法，这一章我们将简单了解一下统计函数（Statistic），看一看它是如何改变几何图形的位置的。

我们首先还是会从统计理论开始，然后实现几个比较常见的统计函数。接下来就让我们开始吧。

# 统计理论（Statistic）

在图形语法这本书中将统计定义为修改几何元素位置的函数，包括了以下这些函数。

这本书里除了统计可以修改几何元素的位置，几何元素的调整（Modifier）也是可以的，比如如下的这些。

因为它们拥有相同的功能，所以在这里我们都有统计函数去实现它们，并且在这里都把它们称为统计函数。接下来我们将实现以下的统计函数：

堆叠（StackY）
对称（SymmetryY）
归一化（NormalizeY）
分箱（BinX）

修改几何元素的位置就意味着修改或者产生位置通道的值，也就是在前面几何图形那章里面提到的 x、x1、y、y1 这些通道的值。这也是为什么上面的统计函数的名字是由 X 和 Y 结尾：X 说明该函数修改了该几何图形 x 通道的值，Y 说明该函数修改了该几何图形 x 通道的值。

具体的实现我们将在接下来的部分看到。正式开始写代码之前需要说明一点的是：目前代码中各个模块下的 utils.js 文件的内容都统一放到了 src/utils 这个文件夹下。

# 堆叠（StackY）

首先我们来看看堆叠（StackY），堆叠这个统计函数常常用于堆叠条形图和堆叠面积图。下面我们先来看一个简单的例子。

const rainfall = [
  { city: 'London', month: 'Jan.', rainfall: 18.9 },
  { city: 'London', month: 'Feb.', rainfall: 28.8 },
  { city: 'London', month: 'Mar.', rainfall: 39.3 },
  { city: 'London', month: 'Apr.', rainfall: 81.4 },
  { city: 'London', month: 'May', rainfall: 47 },
  { city: 'London', month: 'Jun.', rainfall: 20.3 },
  { city: 'London', month: 'Jul.', rainfall: 24 },
  { city: 'London', month: 'Aug.', rainfall: 35.6 },
  { city: 'Berlin', month: 'Jan.', rainfall: 12.4 },
  { city: 'Berlin', month: 'Feb.', rainfall: 23.2 },
  { city: 'Berlin', month: 'Mar.', rainfall: 34.5 },
  { city: 'Berlin', month: 'Apr.', rainfall: 99.7 },
  { city: 'Berlin', month: 'May', rainfall: 52.6 },
  { city: 'Berlin', month: 'Jun.', rainfall: 35.5 },
  { city: 'Berlin', month: 'Jul.', rainfall: 37.4 },
  { city: 'Berlin', month: 'Aug.', rainfall: 42.4 },
];

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

当我们用条形图可视化上面的数据的时候，会得到下面的结果。这里有个奇怪的现象：条的数量和数据数量不一致！这是因为在同一月份的数量对应的条重合在一起了！

为了解决上面的问题，其中一种方法就是通过堆叠函数把在相同月份的条堆叠起来，得到下面的效果。

接下来我们就从数据层面来了解一下堆叠函数的原理。这里还是说一下，统计函数处理的数据不是我们的原始表格数据，而是一个和每个通道绑定的对象，参考下面的例子。

// 原始数据
const raw = [
  { x: 0, y: 1 },
  { x: 0, y: 2 },
  { x: 0, y: 3 }
];

// 和每个通道绑定的对象
const data = {
  index: [0, 1, 2],
  values: {
    x: [0, 0, 0],
    y: [1, 2, 3],
  },
};

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

了解了统计函数的输入之后我们就来看看堆叠函数的使用方式。可以发现它把 x 属性相同的数据的 y 属性的值堆叠起来，修改了 y 的值，并且产生了一个新的 y1 通道的值。

import { createStackY } from '../../src/statistic';

const data = {
  index: [0, 1, 2],
  values: {
    x: [0, 0, 0],
    y: [1, 2, 3],
  },
};
const stack = createStackY();
stack(data);
// {
//   index: [0, 1, 2],
//   values: {
//     x: [0, 0, 0],
//     y1: [0, 1, 3],
//     y: [1, 3, 6],
//   },
// }

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

接下来我们就来看看具体的实现。

// src/statistc/stack.js

import { group } from '../utils';

export function createStackY() {
  return ({ index, values }) => {
    const { x: X, y: Y } = values;

    // 根据 x 通道值分组
    const series = X ? Array.from(group(index, (i) => X[i]).values()) : [index];

    // 生成两个新的通道的值
    const newY = new Array(index.length);
    const newY1 = new Array(index.length);

    // 对每个分组的 y 进行累加
    for (const I of series) {
      for (let py = 0, i = 0; i < I.length; py = newY[I[i]], i += 1) {
        const index = I[i];
        newY1[index] = py;
        newY[index] = py + Y[index];
      }
    }

    return {
      index,
      // 返回修改后的 y 通道的值，并且新增一个 y1 通道
      values: { ...values, y: newY, y1: newY1 },
    };
  };
}

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

# 归一化（NormalizeY）

了解了堆叠这个统计函数之后，我们再来看看归一化这个统计函数。该函数常用于百分比条形图：比如在上面的堆叠条形图的基础上使用归一化统计函数，就会得到下面的例子。

看完了例子，我们来看看使用方法。其实不难发现，归一化其实就是把 y 通道的值都变成了 [0, 1] 这个范围之内。

import { createNormalizeY } from '../../src/statistic';
const data = {
  index: [0, 1, 2],
  values: {
    x: [0, 1, 2],
    y1: [2, 4, 6],
    y: [10, 10, 10],
  },
};
const normalizeY = createNormalizeY();
// {
//   index: [0, 1, 2],
//   values: {
//     x: [0, 1, 2],
//     y1: [0.2, 0.4, 0.6],
//     y: [1, 1, 1],
//   },
// }

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

接下来我们就来看看具体的实现。

// src/statistc/normalize.js

import { group } from '../utils';

export function createNormalizeY() {
  return ({ index, values }) => {
    const {x: X } = values;

    // 按照 x 通道分组
    const series = X ? Array.from(group(index, (i) => X[i]).values()) : [index];

    // 生成定义了的 y 方向的通道值
    const newValues = Object.fromEntries(
      ['y1', 'y']
        .filter((key) => values[key])
        .map((key) => [key, new Array(index.length)]),
    );

    // 处理每一个分组
    for (const I of series) {
      // 找到该分组最大的 y
      const Y = I.flatMap((i) => Object.keys(newValues).map((key) => values[key][i]));
      const n = Math.max(...Y);

      // 归一化每一条数据的每一个 y 方向通道的值
      for (const i of I) {
        for (const key of Object.keys(newValues)) {
          newValues[key][i] = values[key][i] / n;
        }
      }
    }

    return {
      index,
      values: {
        ...values,
        ...newValues,
      },
    };
  };
}

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

# 对称（SymmetryY）

这之后我们来看看对称（SymmetryY），对称这个统计函数常常用于漏斗图和河流图。下面我们先来看一个简单的例子。

在上面数据的基础上，用区域几何图形加上堆叠统计函数我们可以得到以下的堆叠面积图。

但如果我们继续加入对称统计函数，就可以得到下面的河流图，可以发现它是关于 y = 4000 对称的！

接下来我们就从数据层面了解一下它的使用方式。可以发现对称其实是改变了 y 和 y1 这两个通道值。在根据 x 通道分组的基础上，让每个组 y 方向通道的平均值保持一致，并且选择最大的那一个平均值。

import { createSymmetryY } from '../../src/statistic';

const data = {
  index: [0, 1, 2],
  values: {
    x: [0, 1, 2],
    y1: [2, 4, 6],
    y: [8, 8, 8],
  },
};

const symmetryY = createSymmetryY();
symmetryY(data);
// {
//   index: [0, 1, 2],
//   values: {
//     x: [0, 1, 2],
//     y1: [4, 5, 6],
//     y: [10, 9, 8],
//   },
// }

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

接下来我们就来看看具体的实现。

# 分箱（BinX）

最后我们来看看分箱（BinX），分箱这个统计函数常常用于直方图，用于看数据的分布。

比如我们想看看上面数据中的 rainfall 这个属性的分布情况，就可以对该属性进行分箱，最后得到下面的直方图。

参考上面的例子：分箱可以简单理解为对连续数据进行分组。对于离散数据的分组很好理解，但是对于连续数据听上去就有点奇怪了：连续的怎么分？所以我们首先需要计算一些均匀的分割值，把连续的数据范围分成一段段的，然后对每一段所包含的数据进行聚合。

接下来我们就来看看具体的实现。

# 统计理论（Statistic）

# 堆叠（StackY）

# 归一化（NormalizeY）

# 对称（SymmetryY）

# 分箱（BinX）

# 小结

实战 统计 Statistic|可视化专题

实战 统计 Statistic|可视化专题

实战统计 Statistic|可视化专题

实战统计 Statistic|可视化专题