D3.js schemeRdBu[]函数介绍

D3.js中的schemeRdBu[]函数是一种用于创建颜色比例尺的函数，它可以根据给定的数据范围为数据的每个值生成一个代表颜色的字符串。

用法

// 导入d3.js库
import * as d3 from 'd3';

// 创建Color Linear Scale
const colorScale = d3.scaleSequential(d3.interpolateRdBu).domain([0, 100]);

参数

schemeRdBu[]函数没有参数，它返回一个包含256个颜色字符串的数组。

示例

下面是一个示例，展示如何使用schemeRdBu[]函数生成颜色比例尺。

// 导入d3.js库
import * as d3 from 'd3';

// 创建数组：每个元素都是在0~100之间的随机整数
const data = [...Array(10)].map(() => Math.floor(Math.random() * 100));

// 创建Color Linear Scale，并将颜色映射到数据范围内
const colorScale = d3.scaleSequential(d3.interpolateRdBu).domain([0, 100]);

// 创建SVG元素
const svg = d3.select('body').append('svg').attr('width', 200).attr('height', 100);

// 绘制矩形元素，并填充相应的颜色
svg.selectAll('rect').data(data).enter().append('rect').attr('x', (d, i) => i * 20).attr('y', 0).attr('width', 10).attr('height', 100).attr('fill', (d) => colorScale(d));

执行上述代码后，将在浏览器中看到一个具有随机颜色的条形图。

颜色映射

schemeRdBu[]函数返回的颜色字符串数组具有均匀、对称的颜色映射，它允许你将数据映射到相应的颜色，例如：

• 数据大于半数程：颜色为蓝色到深紫色之间
• 数据等于半数程：颜色为中间的白色
• 数据小于半数程：颜色为深红色

在数据的另一半程度中，颜色设置与上述相同，反向使用。