通过上一章节的学习，我们认识了“可视化苏菲世界”这个分析任务，学习了一个数据分析的模型，并且基于该模型提出了很多想要讨论的问题，甚至已经有了简单的设计手段。

但是在一个完整的数据分析的流程中，我们还处于设计阶段，也就是还停留在理论阶段。因此，这一章节我们将进入实现阶段，选择一个问题进行讨论，完成可视化图表的选择，再在浏览器里把它用 Canvas2D 和 SVG 绘制出来，让你更完整和深入地理解数据可视化。

学习是一个循序渐进的过程，所以我们先从一个比较简单的问题入手，来掌握整个实现的流程。基于简单的标准，我们选择的问题是：“哲学家、哲学问题和流派的数量关系是怎样的？”，所以我们去统计了“苏菲的世界”数据集中哲学家、哲学问题和流派的数量，得到的结果如下：

name	value
questions	17
schools	25
philosophers	35

想要体现这三者的数量关系，按照通用的数据分析流程，我们需要经过方案设计、数据处理、数据渲染这几个步骤。接下来，我们分别来说。

# 设计方案

上一章节提到的数据分析的模型主要有三部分，我们就用这三个部分的理论来分析一下“哲学家，哲学问题和流派的数量关系是怎样的？”这个问题，从而得出的我们的设计方案。

认识数据：这个数据集是表格，每一条数据代表一个实体，每一个实体有明显两个属性：name 是分类属性，value 是一个数值属性。当然也有一个隐藏属性，就是它们在表格里面的索引属性：比 questions 的索引属性是 0， schools 的索引属性是 1，philosophers 的索引属性是 2，索引属性明显是分类属性。
确定任务：因为我们不知道它们的关系到底是咋样的，所以这是一个发现任务，对象是哲学家、哲学问题和流派的数量的特征。
设计方案：我们可以根据数据属性和任务的种类，去选择合适的可视化图表。一般来说，了解分类数据和数值属性的特征，最好的选择就是条形图。因为条水平方向的位置是分类属性，所以可以将同为分类属性的索引属性映射过去；因为同为数值属性，所以可以把 value 属性映射为条的高度；最后因为相同的道理，可以把 name 属性映射为条的颜色。

提出设计方案之后，在正式开始写代码之前，因为小册子篇幅的限制，我们先来做几个约定，让我们在有限的篇幅内可以给大家讲解更多有价值的东西。

# 开发约定

这里我们先介绍两个开发约定：

第一，在介绍新代码块的时候，不会显式地说新建或者修改文件或者文件夹。 文章中的代码块中的顶部会有包含该代码块文件的地址，这个地址是相对项目根目录的。如果不存在对应的文件夹和文件，就自行新建对应的文件夹或者文件。否则，对该文件夹或者文件进行修改即可。

比如我要加入以下的代码，因为目前项目中没有 hello 这个文件夹和 index.js 这个文件，所以需要新建它们，然后再增加以下的 foo 函数。

// src/hello/index.js

export function foo() {
  return 'foo';
}

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

第二，讲解内容很多会以注释的实行在代码中展现，不会单独说明。这样将需要实现的功能和对应的代码关联起来，一方面可以更加清楚功能的具体代码实现，另一方面也知道这段代码主要解决什么问题。

// index.js

export function foo() {
  return 'foo'; // 让调用者知道这是一个 foo 函数
}

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

当然最后都会把完整且可以运行的代码存储的 Github 仓库分享给大家，大家可以将代码 Clone 下来学习一下。

说了这么多废话，那么接下里我们正式进入开发环节。

# 数据处理

我们首先进入数据处理阶段，这个阶段的核心任务或者难点就是“如何把原始数据转换成可以直接绘制的数据？”，包括 “转换过程分为哪几个阶段？，我们接下来一点点来看。

首先加入如下代码，用来声明我们要可视化的数据和画布的维度信息。

// ch03/barchart/canvas/index.js

const data = [
  { name: "questions", value: 17 },
  { name: "schools", value: 25 },
  { name: "philosophers", value: 35 },

];

const chartWidth = 480; // 条形图的宽度
const chartHeight = 300; // 条形图的高度
const margin = 15; // 条形图的外边距

const containerWidth = chartWidth + margin * 2; // 容器的宽度
const containerHeight = chartHeight + margin * 2; // 容器的高度

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

接下来我们把需要编码的属性对应的值提取出来。

// ch03/barchart/canvas/index.js

const names = Array.from(data, (d) => d.name);
const values = Array.from(data, (d) => d.value);
const indices = Array.from(data, (_, i) => i);

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

# 布局

这之后我们需要对每一个条进行布局，这个地方就是计算出每一个条的左下顶点的坐标。

// ch03/barchart/canvas/index.js

// 计算每一个条左下顶点的横坐标
// 位置和在数组里面的 index 有关
const step = chartWidth / names.length;
const barWidth = step * 0.8;
const xs = Array.from(indices, (i) => i * step);

// 计算每一个条左下顶点的纵坐标
// 因为所有条底部都是对齐的，所以就是图表的高度
const y = chartHeight;

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

# 映射

布局完成之后就来到了映射过程。这里我们需要把数据的 value 属性映射为条的高度，需要把数据的 name 属性映射为条的颜色。

// ch03/barchart/canvas/index.js

// 获得每一个条的高度
// 条的高度应该和 value 线性相关的
const vmax = Math.max(...values);
const barHeights = Array.from(values, (v) => chartHeight * (v / vmax));

// 获得每一个条的颜色
const nameColor = {
  questions: "#5B8FF9",
  philosophers: "#61DDAA",
  schools: "#65789B",
};

const colors = Array.from(names, (name) => nameColor[name]);

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

# 数据渲染

目前为止我们的数据已经处理完成了，接下来就进入到了数据渲染阶段。数据渲染阶段的核心任务就是是处理后的数据渲染到屏幕上了。

这个阶段需要考虑：选择什么作为承载我们可视化结果的容器，同时选择什么样的绘制技术来渲染这些数据。往往面对不同的可视化需求，不同量级的数据，我们需要选择不同的渲染技术，渲染技术的选择和学习也是其中一个难点。

毫无疑问，作为前端这个领域，承载我们可视化的结果容器就是现代浏览器。在现代浏览器中可以完成可视化的绘制技术至少有4个：HTML、Canvas2D、SVG、WebGL。HTML 的绘制不够灵活，WebGL 主要针对三维场景的可视化（虽然也可以进行二维可视化，我们之后会了解到），所有主流的 2D 可视化的绘制技术主要有两种： Canvas2D 和 SVG。

Canvas2D 和 SVG 的使用方式不同，针对的场景也不同，接下来我们就分别说说。

# Canvas2D

首先，我们来看看 Canvas2D。Canvas2D 是一种指令式的绘图系统，我们调用一些绘图指令，就可以在画布上绘制对应的视觉元素。我们接下来通过绘制一个矩形和 hello world 来看看 Canvas2D 的使用方式。

首先新建一个名叫 canvas-demo 的文件夹，输入以下内容：

（1）在 HTML 文件中声明一个画布。

<!-- ch03/canvas-demo/draw/index.html -->

<!-- 声明一个画布，之后的可视化主要在这里发生 -->
<canvas id="canvas"></canvas>
<script src="./index.js"></script>

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

（2）获得绘制上下文并且设置维度信息。

// ch03/canvas-demo/draw/index.js

// 获得 canvas 容器元素
const canvas = document.getElementById("canvas");

// 设置 canvas 的样式宽高
// 样式宽高决定了 canvas 在画布上呈现的大小
canvas.style.width = 400 + "px";
canvas.style.height = 200 + "px";

// 设置 canvas 画布宽高
// 这个宽高是可以绘制区域的大小
// 样式宽高是默认等于画布宽高的
canvas.width = 400;
canvas.height = 200;

// 获得绘制的上下文
// 之后的 API 都是通过调用 context
const context = canvas.getContext("2d");

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

（3）绘制视觉元素

这里需要注意的 Canvas2D 的坐标系和我们课本里介绍的坐标系有点不同：它的原点是在左上角，x 轴是从左到右的，y 轴是从上到下的，大家可以参考下面的这张图。

// ch03/canvas-demo/draw/index.js

// 绘制一个矩形
context.fillStyle = "red"; // 设置填充颜色
context.strokeStyle = "yellow"; // 设置边框的颜色
context.lineWidth = 10; // 设置边框的宽度
context.strokeRect(0, 0, 100, 100); // 绘制边框
context.fillRect(5, 5, 95, 95); // 绘制填充颜色

// 绘制一段文字
context.fillStyle = "black"; // 设置文字的颜色
context.font = "25px PingFangSC-Regular, sans-serif"; // 设置文字的大小和字体
context.fillText("hello world", 150, 100); // 绘制文字

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

最后的绘制效果如下：

当然 Canvas2D 的能力肯定不止绘制矩形和文字，更多的基本图形：圆形、线段和路径这些我们之后会涉及，但绘制方式都大同小异。首先，我们设置一些绘制的样式，然后调用绘制命令来绘制拥有这些样式的视觉元素。所以其实 Canvas 的 API 主要分为两类，一类是设置状态的 API： context.fillStyle = 'red' ，另一类是绘制的 API：context.fillRect(0, 0, 10, 10) 。

下面再介绍一下 Canvas2D 坐标变换能力，我们可以对其进行平移、缩放和旋转等坐标系变换操作，具体的使用方式和效果参考下面这个例子：

最后得到的绘制效果如下图：

最后的绘制结果如图：

# 设计方案

# 开发约定

# 数据处理

# 布局

# 映射

# 数据渲染

# Canvas2D

# SVG

# 小结

基础 绘制一个条形图|可视化专题

基础 绘制一个条形图|可视化专题

基础绘制一个条形图|可视化专题

基础绘制一个条形图|可视化专题