December 2017
Intermediate to advanced
329 pages
6h 9m
Chinese
Content preview from React学习手册
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
组件扩展
｜
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: ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.