React学习手册

组件扩展

｜

159

知我们的组件和最终用户，我们正在请求数据。当

fetch

调用获得响应时，我们会获得

一个

JSON

对象，然后将它映射成一个包含国家名称的数组。最后，国家名称会被添

加到

State

中，并且

DOM

也被更新了。

集成

D3

时间轴

数据驱动文档（

D3

）是一个

JavaScript

框架，可以用来在浏览器中构建数据可视化应

用。

D3

提供了丰富的工具，允许用户缩放和插入数据。

此外，

D3

采用了函数式编程范式。用户可以通过链式函数调用合成

D3

应用程序，从

而根据一个数组构造一个可视化

DOM

。

时间轴是一个数据可视化的例子。一个时间轴会将事件日期作为数据，然后以图形

的形式直观地展示这些信息。以前发生的历史事件将会排列在稍后发生的事件的左

侧。时间轴上每个事件之间的空格（以像素为单位）表示事件之间的间隔时间（见图

7-6

）。

图

7

-

6

：时间轴的数据可视化效果

这个可视化时间轴只在

500

个像素内就表示了几乎

100

年间的重大事件。将年代值转换

成像素值的过程被称作插值。

D3

提供了将一种数据区间插值到另外一种的所有必备工

具。接下来让我们看看如何将

D3

和

React

集成到一起构造这个时间轴。首先，我们需

要安装

D3

脚本库：

npm install d3 --save

D3

处理的数据，一般是对象数组，开发可视化应用也是基于这些数据。先看看滑雪运

动历史大事年表的数组。这是我们时间轴的数据：

const historicDatesForSkiing = [

{

160

｜

第

7

章

year: 1879,

event: ...