告别色彩混乱：D3.js scale-chromatic打造专业数据可视化配色方案
项目地址: https://gitcode.com/gh_mirrors/d3/d3 你是否还在为数据可视化中的配色问题烦恼？明明数据很精彩，却因为颜色搭配不当导致图表难以阅读？本文将带你全面掌握D3.js的色彩系统，通过scale-chromatic模块轻松实现专业级数据配色，让你的可视化作品既美观又易读。读完本文，你将能够：
- 理解D3.js色彩系统的核心概念
- 掌握分类、顺序和发散型三种配色方案的应用场景
- 学会使用scale-chromatic模块创建自定义色彩比例尺
- 解决常见的色彩视觉障碍问题
D3.js色彩系统概述
D3.js（Data-Driven Documents）是一个用于创建交互式数据可视化的JavaScript库。其中，d3-scale-chromatic模块提供了一系列精心设计的色彩方案，专为数据可视化打造。这些配色方案基于Cynthia A. Brewer的ColorBrewer项目，并针对D3.js的比例尺系统进行了优化。
d3-scale-chromatic模块主要提供三种类型的色彩方案：
- 分类色彩方案（Categorical schemes）：适用于区分不同类别的数据，如不同产品、地区等
- 顺序色彩方案（Sequential schemes）：适用于展示数据的有序变化，如温度、人口密度等
- 发散色彩方案（Diverging schemes）：适用于展示数据相对于中心值的偏离，如增长率、盈亏情况等
这些色彩方案可以与d3-scale模块中的序数比例尺和顺序比例尺无缝配合使用。
快速开始：引入D3.js色彩系统
使用d3-scale-chromatic非常简单，你可以通过以下方式引入：
<!-- 使用国内CDN引入D3.js -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
引入后，你就可以直接使用d3.scheme*和d3.interpolate*等函数来创建色彩比例尺了。
分类色彩方案：区分不同类别的数据
分类色彩方案适用于当你的数据具有离散的类别，且类别之间没有内在顺序关系的场景。例如，不同产品的销售额、不同国家的人口数量等。
基本用法
创建分类色彩比例尺非常简单，只需将色彩方案传递给d3.scaleOrdinal即可：
// 创建使用Accent色彩方案的序数比例尺
const color = d3.scaleOrdinal(d3.schemeAccent);
d3.scaleOrdinal会自动为每个类别分配色彩方案中的颜色。
常用分类色彩方案
d3-scale-chromatic提供了多种分类色彩方案，适用于不同的场景：
schemeCategory10
schemeCategory10是最常用的分类色彩方案之一，包含10种鲜明的颜色，适用于大多数基本可视化场景。
// 使用Category10色彩方案
const color = d3.scaleOrdinal(d3.schemeCategory10);
schemeTableau10
schemeTableau10是Tableau软件使用的10种颜色，具有良好的辨识度和专业性。
// 使用Tableau10色彩方案
const color = d3.scaleOrdinal(d3.schemeTableau10);
其他分类方案
d3-scale-chromatic还提供了多种其他分类方案，如：
- schemeAccent：8种强调色
- schemeDark2：8种深色
- schemePaired：12种成对颜色
- schemePastel1/2：柔和的 pastel 色调
- schemeSet1/2/3：不同大小的颜色集合
顺序色彩方案：展示数据的有序变化
顺序色彩方案适用于展示具有内在顺序的数据，如时间序列数据、温度变化、人口密度等。这些方案通常从浅色过渡到深色，或从低饱和度到高饱和度，直观反映数据值的大小。
基本用法
顺序色彩方案有两种使用方式：连续插值和离散方案。
连续插值适用于需要平滑过渡的场景：
// 创建使用Blues连续色彩方案的顺序比例尺
const color = d3.scaleSequential(d3.interpolateBlues);
离散方案适用于需要固定数量颜色的场景：
// 创建使用Blues离散色彩方案（9种颜色）的序数比例尺
const color = d3.scaleOrdinal(d3.schemeBlues[9]);
常用单色调顺序方案
单色调顺序方案从一种颜色的浅色过渡到深色，简洁而专业：
- interpolateBlues：从浅蓝到深蓝
- interpolateGreens：从浅绿到深绿
- interpolateGreys：从白色到黑色
- interpolateOranges：从浅橙到深橙
- interpolatePurples：从浅紫到深紫
- interpolateReds：从浅红到深红
多色调顺序方案
多色调顺序方案通过两种或多种颜色的渐变，提供更丰富的视觉层次：
- interpolateBuGn：从蓝到绿
- interpolateBuPu：从蓝到紫
- interpolateGnBu：从绿到蓝
- interpolateOrRd：从橙到红
- interpolateYlGnBu：从黄到绿到蓝
感知均匀的顺序方案
这些方案经过精心设计，在视觉上呈现均匀的变化，非常适合科学可视化：
- interpolateViridis：经典的蓝绿黄配色
- interpolateInferno：黑红橙黄配色
- interpolateMagma：黑红紫配色
- interpolatePlasma：紫粉橙黄配色
- interpolateCividis：优化了色盲可读性的配色
发散色彩方案：展示数据的偏离程度
发散色彩方案适用于展示数据相对于某个中心值的偏离情况，如温度异常（高于/低于平均温度）、增长率（正增长/负增长）、盈亏情况等。这类方案通常从中心值向两端发散，使用两种不同的颜色。
基本用法
发散色彩方案同样支持连续插值和离散方案两种使用方式：
连续插值：
// 创建使用RdBu（红-蓝）连续发散色彩方案
const color = d3.scaleSequential(d3.interpolateRdBu);
离散方案：
// 创建使用RdBu离散发散色彩方案（9种颜色）
const color = d3.scaleOrdinal(d3.schemeRdBu[9]);
常用发散色彩方案
d3-scale-chromatic模块提供了多种发散色彩方案：
- interpolateBrBG：棕-蓝绿配色
- interpolatePRGn：紫-绿配色
- interpolatePiYG：粉-黄绿配色
- interpolatePuOr：紫-橙配色
- interpolateRdBu：红-蓝配色
- interpolateRdGy：红-灰配色
- interpolateRdYlBu：红-黄-蓝配色
- interpolateRdYlGn：红-黄-绿配色
- interpolateSpectral：彩虹配色
发散色彩方案的应用技巧
使用发散色彩方案时，有几个技巧可以帮助你创建更有效的可视化：
- 选择合适的中心值：通常使用数据的平均值或中位数作为中心值
- 确保两端颜色对比鲜明：便于用户快速区分正负偏离
- 注意中心值的颜色：中心值颜色应中性，不偏向任何一端
- 考虑色盲友好性：如使用interpolatePRGn（紫-绿）方案对色盲更友好
高级应用：自定义色彩比例尺
虽然d3-scale-chromatic提供了丰富的预设色彩方案，但有时你可能需要创建自定义的色彩比例尺。D3.js提供了灵活的方式来实现这一点。
反转色彩方案
你可以使用d3.reverse轻松反转现有的色彩方案：
// 创建反转的Blues顺序色彩方案
const reversedBlues = d3.interpolateBlues.copy().reversed();
const color = d3.scaleSequential(reversedBlues);
限制色彩范围
有时你可能需要限制色彩方案的范围，只使用其中的一部分：
// 创建只使用Blues方案中50%-100%范围的比例尺
const color = d3.scaleSequential(t => d3.interpolateBlues(0.5 + t * 0.5));
组合多种色彩方案
你还可以组合多种色彩方案，创建更复杂的配色逻辑：
// 根据数据值选择不同的色彩方案
function customColor(value) {
if (value < 0) {
// 负值使用红-橙顺序方案
return d3.interpolateReds(1 - Math.abs(value) / 100);
} else if (value > 0) {
// 正值使用绿-蓝顺序方案
return d3.interpolateGreens(value / 100);
} else {
// 零值使用灰色
return "#ccc";
}
}
const color = d3.scaleSequential(customColor);
色彩可访问性：让你的可视化对所有人友好
在创建数据可视化时，考虑色彩可访问性非常重要。据统计，全球约有8%的男性和0.5%的女性患有某种形式的色盲。通过遵循以下原则，你可以确保你的可视化对更多人友好：
选择色盲友好的色彩方案
d3-scale-chromatic中的许多方案已经考虑了色盲友好性：
- interpolateViridis：对大多数色盲友好
- interpolateCividis：专为色盲优化
- interpolatePRGn：紫-绿方案对红绿色盲友好
不仅仅依赖颜色
除了使用色盲友好的色彩方案，还应通过其他方式区分数据：
- 添加形状差异（圆形、方形、三角形等）
- 使用不同的图案填充
- 添加标签或图例
测试色彩对比度
确保文本与背景色之间有足够的对比度，推荐使用WebAIM的对比度检查工具。对于顺序色彩方案，可以使用以下代码增加对比度：
// 增加色彩对比度
const color = d3.scaleSequential(t => d3.interpolateBlues(Math.pow(t, 0.7)));
实战案例：创建专业的数据可视化
让我们通过一个完整的案例，展示如何使用d3-scale-chromatic创建专业的数据可视化。我们将创建一个展示不同地区销售数据的柱状图，使用分类色彩方案区分地区，使用顺序色彩方案表示销售额大小。
<!DOCTYPE html>
<html>
<head>
<title>D3.js色彩系统实战案例</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
.bar {
margin: 2px;
border-radius: 4px;
}
.axis {
font-size: 12px;
}
</style>
</head>
<body>
<svg id="chart" width="800" height="400"></svg>
<script>
// 模拟销售数据
const data = [
{ region: "华北", sales: 45, profit: 12 },
{ region: "华东", sales: 68, profit: 25 },
{ region: "华南", sales: 52, profit: 18 },
{ region: "西北", sales: 36, profit: 8 },
{ region: "西南", sales: 41, profit: 15 },
{ region: "东北", sales: 30, profit: 5 },
{ region: "中部", sales: 58, profit: 20 }
];
// 创建SVG画布
const svg = d3.select("#chart");
const margin = { top: 40, right: 30, bottom: 40, left: 60 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
// 创建分类色彩比例尺（区分地区）
const regionColor = d3.scaleOrdinal()
.domain(data.map(d => d.region))
.range(d3.schemeTableau10);
// 创建顺序色彩比例尺（表示销售额）
const salesColor = d3.scaleSequential()
.domain([0, d3.max(data, d => d.sales)])
.interpolator(d3.interpolateBlues);
// 创建发散色彩比例尺（表示利润率）
const profitColor = d3.scaleDiverging()
.domain([-10, 0, 30])
.interpolator(d3.interpolateRdBu);
// 创建x轴比例尺
const x = d3.scaleBand()
.domain(data.map(d => d.region))
.range([0, width])
.padding(0.1);
// 创建y轴比例尺
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.sales)])
.range([height, 0]);
// 绘制x轴
g.append("g")
.attr("class", "axis")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
// 绘制y轴
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(5));
// 添加轴标签
g.append("text")
.attr("y", height + margin.bottom - 5)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.text("地区");
g.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -margin.left + 15)
.attr("x", -height / 2)
.attr("text-anchor", "middle")
.text("销售额 (万元)");
// 添加标题
g.append("text")
.attr("x", width / 2)
.attr("y", -margin.top / 2)
.attr("text-anchor", "middle")
.attr("font-size", "16px")
.text("各地区销售业绩");
// 绘制柱状图（使用分类色彩方案）
g.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", d => x(d.region))
.attr("y", d => y(d.sales))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.sales))
.attr("fill", d => regionColor(d.region))
.attr("stroke", "#333")
.attr("stroke-width", 1);
// 添加利润率点（使用发散色彩方案）
g.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", d => x(d.region) + x.bandwidth() / 2)
.attr("cy", d => y(d.sales) - 15)
.attr("r", 8)
.attr("fill", d => profitColor(d.profit))
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.append("title")
.text(d => `利润率: ${d.profit}%`);
// 添加销售额标签
g.selectAll("text.value")
.data(data)
.enter().append("text")
.attr("class", "value")
.attr("x", d => x(d.region) + x.bandwidth() / 2)
.attr("y", d => y(d.sales) - 5)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.text(d => d.sales);
// 添加图例
const legend = g.append("g")
.attr("transform", `translate(${width - 180}, 0)`);
data.forEach((d, i) => {
const item = legend.append("g")
.attr("transform", `translate(0, ${i * 20})`);
item.append("rect")
.attr("width", 15)
.attr("height", 15)
.attr("fill", regionColor(d.region));
item.append("text")
.attr("x", 20)
.attr("y", 12)
.attr("font-size", "12px")
.text(d.region);
});
</script>
</body>
</html>
总结与展望
通过本文的介绍，我们详细了解了D3.js中scale-chromatic模块提供的色彩系统，包括分类、顺序和发散三种类型的色彩方案及其应用场景。我们还学习了如何创建自定义色彩比例尺，以及如何确保色彩的可访问性。
D3.js的色彩系统为数据可视化提供了强大的支持，让我们能够轻松创建专业、美观且易读的可视化作品。无论是简单的柱状图还是复杂的地理信息可视化，合适的色彩方案都能大大提升数据传达的效率。
未来，随着Web技术的发展，D3.js的色彩系统也将不断完善。我们可以期待更多考虑色彩感知、文化差异和可访问性的高级色彩方案的出现。
希望本文能够帮助你更好地理解和应用D3.js的色彩系统，创建出更加精彩的数据可视化作品！
相关资源：
推荐学习路径：
- 掌握基本色彩方案的使用
- 学习色彩理论和数据可视化最佳实践
- 实践创建不同类型的可视化作品
- 深入学习自定义色彩比例尺和高级应用
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
