前言
在当今的前端开发中，数据可视化已成为非常重要的一项技能。而 r-d3 就是基于 d3.js 的数据可视化库，使得数据的可视化变得轻松简单。本文将详细介绍如何使用 npm 包 r-d3，以及其中包含的一些细节。读者在学习本文之后便能够轻松利用 r-d3 进行数据可视化。
r-d3 的安装及使用
首先使用 npm 安装 r-d3：
npm install r-d3 --save
接下来就可以在代码中引入 r-d3 了：
import * as rd3 from 'r-d3';
// 或者
const rd3 = require('r-d3');可以看到我们使用了 import，也可以使用 require:
在 HTML 中添加 D3.JS 和 R-D3：
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://unpkg.com/r-d3/d3-annotation.min.js"></script> <script src="https://unpkg.com/r-d3/r-d3.min.js"></script>
接下来就可以构建我们的图表了。下面我们将介绍 r-d3 包中的一些常用图表。
线图
线图是最简单的可视化之一。我们可以通过以下代码构建一条线：
-- -------------------- ---- -------
----- ---- - -
- -- ------------- -- --- --
- -- ------------- -- --- --
- -- ------------- -- --- --
- -- ------------- -- --- --
- -- ------------- -- --- --
- -- ------------- -- --- --
- -- ------------- -- --- -
--
----- --------- - --------------
------ -
---- -----------------------
----------
-----------
-----------
------------
--------------
----------------
------------------- ----
--
------
--上面的代码创建了一条线图，并使用数据 data 来绘制图表。chart 的宽度为 600，高度为 300，图表中的线条填充色为 #39A6FF，线条颜色也是相同的颜色，Y 轴 label 为 "Revenue ($)". 另外还可以通过定义 styling 来设置其他的样式。
柱图
柱图是另一种常见的可视化类型。以下是利用 r-d3 来画柱图的代码：
-- -------------------- ---- -------
----- -------- - -------------
------ -
---- ----------------------
---------
-----------
------------
-----------
----------------
------------------
--------
----------- ------------ -- -------
--
---------------
--------------- ------- -- -----------
--
------
--上面的代码创建了一张柱图，并使用数据 data 来绘制图表。chart 的宽度为 500，高度为 300，填充色为 #3182BD，使用 ordinal 比例尺 xScale，x 轴的 tick 值为 data 中 year 的值。同上，我们还可以通过定义样式来设置其他的样式。
散点图
散点图是一张曲线更加复杂的图表，但同样常常出现在数据可视化中。以下是利用 r-d3 来画散点图的代码：
-- -------------------- ---- -------
----- ------------ - -----------------
------ -
---- --------------------------
-------------
-----------
-----------
------------
------------
---------------
---------- --- -------
---------------------
-------------------
--------------
----------------------------- ---
--------------------- ----
--
------
--上面的代码创建了一张散点图，并使用数据 data 来绘制图表。*chart 的宽度为 400，高度为 400，X 轴 label 为 "Age"，Y 轴 label 为 "Weight"，图表标题为 "Age vs. Weight"。同上，也可以通过其他方式来定义其他的样式。
本文介绍了如何使用 npm 包 r-d3 创建多种类型的图表。r-d3 将 d3.js 的常用功能封装成了一个简单且易扩展的 API，使得我们可以很方便地用于数据可视化中。读者在学习本文之后可以利用 r-d3 的快捷方法来轻松的构建各种类型的图表，为数据可视化工作提供便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005666681e8991b448e2851