D3.js interpolateRainbow()函数介绍

D3.js interpolateRainbow()函数是D3.js库中的一种插值器(interpolator)，可以根据给定的值在[红,黄,绿,青,蓝,紫]这6种颜色中进行插值并返回颜色值，常用于图表渐变填充色的设置。

语法

d3.interpolateRainbow(t) 

参数

该函数接收一个参数t，表示插值比率，取值范围在[0,1]之间，其中0表示100%红色，0.16表示黄色，0.33表示绿色，0.5表示青色，0.66表示蓝色，0.83表示紫色，1表示100%红色。

返回值

返回一个表示颜色值的字符串，如"#FF0000"表示红色，"#FFFF00"表示黄色。

示例

// 生成颜色值数组
const colorArray = d3.range(0, 1, 0.1).map(t => d3.interpolateRainbow(t));

// 渲染条形图
d3.select("#chart")
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.category))
  .attr("y", d => yScale(d.value))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d.value))
  .attr("fill", (d, i) => colorArray[i]);

上述示例代码中，colorArray数组通过d3.interpolateRainbow()函数生成，用于给条形图的每个条形设置不同的填充颜色。

参考链接

• D3.js文档 - d3.interpolateRainbow()