npm 包 colorbrewer 使用教程

在前端开发中，经常需要使用到颜色相关的功能。而为了方便开发者使用，npm 社区提供了许多优秀的颜色处理包，其中 colorbrewer 就是一款优秀的色彩方案生成工具。该 npm 包提供了多种预定义的配色方案，方便开发者快速地构建色彩设计。

本篇文章我们将详细介绍 npm 包 colorbrewer 的使用方法，包括其安装、引入、调用等内容，并且将深入探讨其源码实现和使用场景。同时，本文还将通过示例代码为读者提供指导意义，以便帮助大家更好地理解和运用 colorbrewer。

安装和引入

要使用 colorbrewer，首先需要在本地安装 this package：

npm install colorbrewer

npm 会将用客户端 JavaScript 运行的所有程序包下载到node_modules文件夹中，之后就可以使用require或import的方式引入：

// commonjs
const colorBrewer = require("colorbrewer");

// es6 module
import colorBrewer from "colorbrewer";

在引入 colorbrewer 后，它将作为一个对象储存在变量 colorBrewer 中，我们也可以将其命名为自己喜欢的变量名。

使用

下面我们将演示如何使用 colorbrewer 生成颜色方案：

const colors = colorBrewer["PuBu"][7];
console.log(colors);  // ['#f1eef6', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#034e7b']

上述代码中，我们使用了 colorBrewer 对象提供的一个名为“PuBu”的预定义颜色方案，并使用方案中的第七种颜色组作为演示。colors 变量存储了该方案的颜色值数组。所以打印 colors 就可以看到七种颜色的十六进制值。

预定义颜色方案

colorbrewer 插件提供的预定义配色方案以对象的方式存放在 colorBrewer 对象中。这些配色方案按主色调分类，比如“YlOrRd”为黄色橙色红色。每个主色调为对象属性，其值是包含更多不同颜色数量的具体颜色集。

这里提供一份常用的预定义配色方案集：

上表中的每种颜色方案都是基于最初的 R 软件中的调色板配色方案设计的，这些方案可以帮助开发者轻松构建高质量的图表和数据可视化。

插值函数

除了预定义方案之外，colorbrewer 还提供了多个自定义的回调函数来生成动态颜色方案。这些自定义方案函数被当做参数传递给brewer函数（brewer 函数是固定的，返回内部的一个颜色生成函数）中，以实现对自定义方案的使用。

下面演示了如何生成两种不同的插值函数：

const interpolator1 = colorBrewer.interpolate.OrRd;
const interpolator2 = colorBrewer.interpolate.RdYlBu;

上述代码中，我们使用 colorBrewer 对象提供的两个插值方案（OrRd 和 RdYlBu），并分别存储在 interpolator1 和 interpolator2 变量中。

源码实现

如果你对如何生成预定义颜色方案或如何创建自定义配色方案的解释感到好奇，那么可以探索一下 colorbrewer npm 包的源码实现。

colorbrewer 的主要类别和包含的颜色数量存储在index.js文件中，可以按照如下方式进行解释：

-- -------------------- ---- -------
--- ----------- - -------------------------
--- ---- - -------------
--- ------ - --------
--- - - --

-------------- - ----------------- -
  ------- - ------- -- ---
  ---- - ------------ -- -----
  ------ - -------------- -- -------
  - - --------- -- --

  ------ ------------------------------------- ----------- -----
--

这段代码中，导入了colorbrewer对象，该对象包含了预定义颜色方案的定义。然后定义了三个变量，分别确定了类型（顺序型、定性型、发散型）、配色方案和颜色数量。默认值分别设置为 "sequential"、"Blues"、6。最后导出了一个函数，该函数返回使用类型、方案和颜色数量生成的数组。

预定义颜色方案的列表在colorbrewer.js中，其中使用了一些常量，例如以下示例代码中常量的使用：

-- -------------------- ---- -------
-------------- - -
  ----------- -
    ------ -
      -- ----------- ---------- -----------
      -- ----------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
    --
    ------- -
      -- ----------- ---------- -----------
      -- ----------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
    --
    ------ -
      -- ----------- ---------- -----------
      -- ----------- ---------- ---------- -----------
      -- ----------- ---------- ---------- ---------- -----------

每个主色调又包含一个由颜色列表组成的对象，其中键名是包含颜色的数字，以示例代码在括号中所示。你可以使用键名从该对象中获取颜色数组。

在本文中，使用了 colorbrewer 库的序数配色方案和配色方案中的必要颜色示例。

// Using a colorbrewer sequential scheme and example color array
var scheme = "YlGn";
var colors = colorbrewer[scheme][3];

为了实现自定义颜色插值方案，colorbrewer 也包含一个内部文件 interpolate.js。该文件导出了许多可以接收范围[0，1]的插值器函数，这些函数可以按照一个颜色数组返回插值过的颜色值。在内部，这些插值器广泛使用了 d3-interpolate 库的颜色插值函数，具体操作步骤需要在调用旋钮函数时传递颜色数组。

-- -------------------- ---- -------
--- ----------- - --------------------------
--- ------ - -------------------------------------
--- --------- - ----------- -- -
  ------ --------- -- - --
--
--- ------ - -------------------------------------

-------- -------------- -
  --- - - --------------
  ------ ----------- -
    - - ----------- ----------- --- - -- - ---
    --- - - - - --
    ------ -------------------- -------- - ----
  --
-

------------------ - ---------------------------
------------ - -------

--
 - ------- - ----------- ----------- ------ -- ------ --
 --
------ -------- ----------------- -- -
  ------ -----------------------------
-

-------- ---------------------- -
  --- - - ------------------
      ---- - --------------------- - ----------
      ---- - -- -- ----- - --
      ----- - ---

  ------------------------------------- -- -
    --------------- - --
  ---

  -------- ----------- -
    ------ --------------- - -- - - - ----
  -

  --------------- - ----------- -
    -- ------------------- ------ -------------------
    ---------- - ---
    ----- - ---
    --- ---- - - -- - - --------- ---- -
      --- -------- - -----
      -- ----------- -- ------- -
        --------------------------
        --------------- - --
      -
    -
    - - ------------------
    ---- - -- -- --------------------- - ---------- - --
    ------ ---------
  --

  ------ ---------
-

------ ------------ -- ----- ----------- --------
------ ------- -------

应用场景

colorbrewer 库广泛应用于数据可视化和地图相关的项目中。数据可视化项目需要使用高质量的配色方案，以传达重要的信息并与大众建立联系。而 colorbrewer 提供了种类丰富的色彩方案，开发者可以在其中选择最佳的配色方案，以优化其可视化方案。因此，colorbrewer 现已成为数据可视化和地图等领域不可或缺的一部分。

地图着色

在地图上，可以使用这个库生成一系列不同分类的着色方案，以帮助更好地显示与特定主题相关的信息。

图 1. 地图上使用 colorbrewer 实现不同的着色方案

数据可视化

在数据可视化中，可以使用 colorbrewer 为条形图、散点图、直方图、饼图等图表类型生成配色方案。

图 2. 数据可视化中的 colorbrewer 配色方案

总结

colorbrewer 是一个实用的 npm 包，旨在为开发者提供一系列优秀的颜色配色方案，方便开发者快速构建高质量的可视化项目。本文为读者介

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc286b5cbfe1ea0612095