d3-scale-chromatic 深度解析：3种颜色方案类型与50+预定义调色板

d3-scale-chromatic 深度解析：3种颜色方案类型与50+预定义调色板

【免费下载链接】d3-scale-chromaticSequential, diverging and categorical color scales.项目地址: https://gitcode.com/gh_mirrors/d3/d3-scale-chromatic

d3-scale-chromatic 是 D3.js 生态系统中专注于颜色比例尺的强大工具库，提供了50多种精心设计的预定义调色板，涵盖顺序、发散和分类三种核心颜色方案类型。无论是数据可视化新手还是专业开发者，都能通过这个免费工具快速实现专业级的色彩映射效果。

为什么选择 d3-scale-chromatic？

在数据可视化中，色彩选择直接影响信息传达的清晰度和视觉体验。d3-scale-chromatic 基于色彩理论和心理学研究，提供了经过优化的调色板集合，具有以下优势：

• 科学配色：所有调色板均考虑了人类视觉感知特性，确保色彩过渡自然且易于区分
• 即插即用：无需复杂配置，直接引用预定义方案即可实现专业效果
• 类型齐全：覆盖数据可视化所需的三大类色彩方案
• 灵活扩展：支持自定义插值和颜色范围调整

该项目的核心源码组织在src/目录下，按颜色类型分为categorical/（分类）、diverging/（发散）和sequential-multi/（多色调顺序）等子模块，结构清晰便于使用。

3大核心颜色方案类型详解

1. 顺序颜色方案（Sequential）

顺序颜色方案通过单一色调或相似色调的渐变来表示数值的大小变化，适用于展示有明确高低之分的数据。d3-scale-chromatic 提供了单色调和多色调两种顺序方案：

单色调顺序方案：

• schemeBlues：从浅蓝到深蓝的渐变，适合表示海洋温度、人口密度等
• schemeGreens：从浅绿到深绿的过渡，常用于环保数据、植被覆盖等主题
• schemeReds：从粉红到深红的变化，适合风险评估、热度分布等场景

多色调顺序方案： 多色调方案通过两种或多种颜色的平滑过渡创造更丰富的视觉层次。例如schemeViridis是一个从深蓝到亮黄的渐变，具有出色的可读性和色彩对比度，特别适合科学可视化。

图：Viridis 调色板示例，一种广泛用于科学可视化的多色调顺序颜色方案

其他热门多色调方案包括：

• schemeInferno：从深蓝到亮橙的高温感渐变
• schemeMagma：深紫到亮黄的熔岩风格渐变
• schemePlasma：深蓝到亮粉的等离子风格渐变

2. 发散颜色方案（Diverging）

发散颜色方案以中性色为中心，向两端延伸出不同的色调，非常适合展示偏离中心值的数据变化，如温度异常（冷暖对比）、民意调查（正负倾向）等。

d3-scale-chromatic 提供的主要发散方案包括：

• schemeRdBu：从红色到蓝色的经典发散方案，红色表示正值，蓝色表示负值
• schemePRGn：品红到绿色的渐变，适合表示盈亏、增减等对比数据
• schemeSpectral：彩虹色发散方案，从红到紫的全光谱过渡

发散方案的源码集中在src/diverging/目录下，每个方案都提供了插值函数和预定义色阶。

3. 分类颜色方案（Categorical）

分类颜色方案由一组视觉上可区分的离散颜色组成，适用于表示没有内在顺序关系的类别数据，如不同国家、产品类型、部门等。

常用的分类方案包括：

• schemeCategory10：10种鲜明颜色，适合大多数分类场景
• schemeSet1：8种高对比度颜色，适合需要突出显示的类别
• schemePaired：12种成对颜色，适合相关联的分类数据

图：Tableau10 分类调色板示例，包含10种易于区分的离散颜色

分类方案的实现位于src/categorical/目录，每个文件对应一种预定义的分类调色板。

快速开始：如何使用 d3-scale-chromatic

使用 d3-scale-chromatic 非常简单，只需几步即可将专业调色板应用到你的可视化项目中：

安装方法

通过 npm 安装：

npm install d3-scale-chromatic

或直接引入 CDN：

<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>

如果需要本地开发，可以克隆仓库：

git clone https://gitcode.com/gh_mirrors/d3/d3-scale-chromatic

基本使用示例

使用顺序颜色方案：

import { schemeViridis } from 'd3-scale-chromatic'; // 获取包含5个颜色的Viridis调色板 const colors = schemeViridis[5]; // 结果: ["#440154", "#3b528b", "#21918c", "#5ec962", "#fde725"]

使用颜色插值函数：

import { interpolateRainbow } from 'd3-scale-chromatic'; // 获取0到1之间任意值对应的颜色 const color = interpolateRainbow(0.5); // 中间值对应的彩虹色

图：彩虹色插值效果，通过 interpolateRainbow 函数可获取任意位置的颜色值

高级应用技巧

自定义颜色范围

d3-scale-chromatic 的插值函数可以与 D3 的比例尺结合，创建自定义范围的颜色映射：

import { scaleLinear } from 'd3-scale'; import { interpolateCool } from 'd3-scale-chromatic'; // 创建0-100到cool调色板的映射 const colorScale = scaleLinear() .domain([0, 100]) .range([interpolateCool(0), interpolateCool(1)]); // 获取值为50的颜色 const color = colorScale(50);

图：Cool 冷色调插值效果，从紫色过渡到绿色

色彩空间转换

结合 d3-color 模块，可以对颜色进行进一步处理：

import { interpolateWarm } from 'd3-scale-chromatic'; import { rgb } from 'd3-color'; const color = rgb(interpolateWarm(0.5)).darker(0.5); // 调暗颜色

总结

d3-scale-chromatic 为数据可视化提供了专业、科学的色彩解决方案，其50多种预定义调色板覆盖了各种可视化需求。无论是简单的分类图表还是复杂的科学可视化，都能通过这个强大的工具轻松实现引人入胜的色彩效果。

项目源码结构清晰，主要分为src/categorical/、src/diverging/和src/sequential-multi/等目录，便于开发者理解和扩展。通过结合 D3 的比例尺功能，可以实现高度定制化的颜色映射，为你的可视化项目增添专业品质。

无论你是数据可视化新手还是有经验的开发者，d3-scale-chromatic 都是提升可视化效果的必备工具。立即尝试将这些精心设计的调色板应用到你的项目中，体验专业色彩带来的视觉提升！

【免费下载链接】d3-scale-chromaticSequential, diverging and categorical color scales.项目地址: https://gitcode.com/gh_mirrors/d3/d3-scale-chromatic