d3-scale-chromatic 快速入门：10分钟学会使用顺序、发散和分类颜色方案
【免费下载链接】d3-scale-chromaticSequential, diverging and categorical color scales.项目地址: https://gitcode.com/gh_mirrors/d3/d3-scale-chromatic
d3-scale-chromatic 是 D3.js 数据可视化生态系统中一个强大的颜色方案库，专门为数据可视化提供专业的顺序、发散和分类颜色方案。无论你是数据可视化新手还是经验丰富的开发者，掌握这个库都能让你的图表色彩更加专业和美观。🎨
为什么需要专业的颜色方案？
在数据可视化中，颜色不仅仅是装饰元素，它承载着重要的信息传递功能：
- 顺序颜色方案：用于表示从低到高的连续数值数据
- 发散颜色方案：用于表示有中间点的数据（如温度的正负、满意度评分）
- 分类颜色方案：用于区分不同的类别数据（如国家、产品类型）
📦 安装与基础设置
首先通过 npm 安装 d3-scale-chromatic：
npm install d3-scale-chromatic或者直接在浏览器中使用：
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>🌈 三大颜色方案类型详解
1. 顺序颜色方案 (Sequential)
顺序颜色方案适用于表示单一维度的连续数据，从浅色到深色渐变。d3-scale-chromatic 提供了多种顺序颜色方案：
Blues 蓝色渐变方案 - 适合表示温度、密度等连续数据
Greens 绿色渐变方案 - 适合表示植被覆盖、环保指标
Reds 红色渐变方案 - 适合表示热度、危险等级
主要API位于src/sequential-single/和src/sequential-multi/目录：
- 单色渐变：Blues、Greens、Greys、Oranges、Purples、Reds
- 多色渐变：Viridis、Plasma、Inferno、Magma、Cividis、Turbo
2. 发散颜色方案 (Diverging)
发散颜色方案适用于有中间值的数据，如温度（冷热）、满意度（满意/不满意）：
RdBu 红蓝发散方案 - 适合表示正负温度、政治倾向
Spectral 光谱发散方案 - 适合表示多样性、光谱分析
PiYG 粉绿发散方案 - 适合表示生物数据、性别差异
主要API位于src/diverging/目录，包含 BrBG、PRGn、PiYG、PuOr、RdBu、RdGy、RdYlBu、RdYlGn、Spectral 等方案。
3. 分类颜色方案 (Categorical)
分类颜色方案用于区分不同的类别，每个类别使用明显不同的颜色：
Category10 分类方案 - D3默认的10色分类方案
Tableau10 分类方案 - Tableau软件的标准10色方案
Set3 分类方案 - 柔和的12色分类方案
主要API位于src/categorical/目录，包含 Category10、Accent、Dark2、Paired、Pastel1、Pastel2、Set1、Set2、Set3、Tableau10 等方案。
🚀 快速使用指南
基本导入方式
// ES6 模块导入 import { interpolateBlues } from "d3-scale-chromatic"; import { schemeCategory10 } from "d3-scale-chromatic"; // 或者按需导入特定方案 import { interpolateViridis } from "d3-scale-chromatic"; import { schemeSet3 } from "d3-scale-chromatic";顺序颜色方案使用
// 获取颜色值（t 为0-1之间的值） const color = interpolateBlues(0.5); // 返回中间蓝色 const darkBlue = interpolateBlues(0.9); // 返回深蓝色 const lightBlue = interpolateBlues(0.1); // 返回浅蓝色分类颜色方案使用
// schemeCategory10 是包含10个颜色的数组 const colors = schemeCategory10; // colors[0] = "#1f77b4" (第一个颜色) // colors[1] = "#ff7f0e" (第二个颜色) // ... // 与 d3-scale 的 scaleOrdinal 配合使用 import { scaleOrdinal } from "d3-scale"; const colorScale = scaleOrdinal(schemeCategory10);📊 实际应用场景
场景1：地图着色
使用顺序颜色方案为地图上的区域着色，颜色深浅表示数据大小：
// 假设 regions 是地理区域数组，values 是对应的数值 regions.forEach(region => { const value = values[region.id]; const normalizedValue = (value - minValue) / (maxValue - minValue); const color = interpolateGreens(normalizedValue); // 应用颜色到地图区域 });场景2：分类数据可视化
使用分类颜色方案区分不同的产品类别：
const categories = ["电子产品", "服装", "食品", "图书", "家居"]; const colorScale = scaleOrdinal(schemeSet3); categories.forEach((category, i) => { const color = colorScale(category); // 每个类别使用不同的颜色 });场景3：发散数据展示
使用发散颜色方案显示温度变化：
// 温度范围从-10°C到+10°C temperatures.forEach(temp => { const normalized = (temp + 10) / 20; // 归一化到0-1 const color = interpolateRdBu(normalized); // 蓝色表示冷，红色表示热 });🎯 最佳实践建议
1. 选择合适的颜色方案
- 连续数据：使用顺序颜色方案
- 有中间值的数据：使用发散颜色方案
- 分类数据：使用分类颜色方案
2. 考虑色盲友好性
部分颜色方案对色盲用户更友好：
- Viridis、Plasma、Inferno、Magma、Cividis 是色盲友好的顺序方案
- 避免红绿色组合（约8%的男性是红绿色盲）
3. 保持一致性
在同一图表或仪表板中保持颜色方案的一致性，帮助用户建立视觉记忆。
4. 提供图例
始终为颜色编码提供清晰的图例，说明颜色与数据的对应关系。
🔍 高级技巧
自定义颜色插值
import { interpolateRgb } from "d3-interpolate"; import { scaleSequential } from "d3-scale"; // 创建自定义的连续颜色比例尺 const customScale = scaleSequential(interpolateRgb("white", "steelblue"));与 D3 其他模块集成
d3-scale-chromatic 与 D3 的其他模块完美集成：
- 与
d3-scale的scaleSequential和scaleOrdinal配合使用 - 与
d3-axis结合创建带颜色的坐标轴 - 与
d3-legend结合创建颜色图例
📈 性能优化提示
- 缓存颜色值：对于静态数据，预先计算并缓存颜色值
- 按需导入：只导入需要的颜色方案，减少打包体积
- 使用CDN：在浏览器环境中使用CDN版本，利用缓存
🎨 可视化效果对比
以下是几种常用颜色方案的视觉对比：
Viridis 方案 - 色盲友好，感知均匀
Plasma 方案 - 高对比度，适合突出重点
Inferno 方案 - 深色背景下的优秀选择
💡 总结
d3-scale-chromatic 为数据可视化提供了专业级的颜色解决方案。通过合理使用顺序、发散和分类颜色方案，你可以：
✅ 创建更加美观和专业的数据可视化
✅ 提高数据的可读性和理解性
✅ 确保图表对色盲用户友好
✅ 与 D3.js 生态系统无缝集成
记住：好的颜色方案不仅让图表更美观，更重要的是让数据故事更清晰！📊
开始使用 d3-scale-chromatic，让你的数据可视化作品色彩更加专业和有效！🚀
【免费下载链接】d3-scale-chromaticSequential, diverging and categorical color scales.项目地址: https://gitcode.com/gh_mirrors/d3/d3-scale-chromatic
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
