D3篇之色卡

2024-01-08 19:04

文章标签 色卡 d3

本文主要是介绍D3篇之色卡，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

学习传送门：Sequential scales | D3 by Observable

1.scaleSequential(domain, interpolator)（连续比例尺）

是一种在D3.js中用于将一个范围内的连续值射到另一个范围内的连续值的方法。该比例尺通常用于将数值型数据映射到图表元素的属性上，例如颜色、大小、透明度等。它通常会根据所提供的输入和输出范，生成一个可以将一个连续输入域映射到一个输出范围的函数，使用该函数对图表元素进行样式设置。

1.盒子容器

<span id="color">颜色</span>

<div id="colorRef" ref="colorRef" :class="$style.colorRef"></div>

2.设置顺序尺，这里我们采用的是连续比例尺 scaleSequential

const colorScale = d3.scaleSequential(d3.interpolateReds).domain([0, 100]);d3.select('#colorRef').style('background', `linear-gradient(to right, ${colorScale(0)}, ${colorScale(100)})`).on('click', function (event, d) {// 获取点击位置的X坐标const clickX = d3.pointer(event)[0];// 获取容器的宽度const containerWidth = this.clientWidth;// 计算点击位置所对应的比例值（0 到 1）const clickedRatio = clickX / containerWidth;// 根据比例值和域范围获取对应的数据值const dataValue = clickedRatio * (colorScale.domain()[1] - colorScale.domain()[0]) + colorScale.domain()[0];// 在控制台打印点击位置所对应的数据值document.getElementById('color').style.color = colorScale(dataValue);});

d3-scale-chromatichttps://d3js.org/d3-scale-chromatic

这块主要是d3提供的一些颜色范围，更改代码里面的d3.interpolateReds可看到不同颜色的卡尺

注意：与下面scaleOrdinal不同的是顺序比例尺的range是用于限制颜色范围，比如说将上面的红色限制范围在2个红色之间；添加了range，最终呈现会以range为主

colorScale.range([d3.rgb(255, 240, 240), d3.rgb(165, 0, 38)]); // 设置输出范围为两种红色的渐变

const colorScale = d3

.scaleSequential(d3.interpolateBlues)

.domain([0, 100])

.range([d3.rgb(255, 240, 240), d3.rgb(165, 0, 38)]);

这段代码显示的颜色，是以range为主的红色

1-2.彩虹颜色比例尺

在测试颜色的时候，我发现d3.interpolateRainbow使用上面的scaleSequential用起来有点不符合我想要的const color = d3.scaleSequential(d3.interpolateRainbow).domain([0,100]);展示界面并不是彩虹色

是因为彩虹色（Rainbow）并不是线性分布的颜色。因此，在使用彩虹色的连续比例尺时，不适合直接将颜色线性地映射到 linear-gradient 中。彩虹色在颜色空间上的分布并不是简单的线性或均匀的。所以这我们采用svg绘制渐变色带

 // 创建一个更广泛的连续彩虹色比例尺const rainbowScale = d3.scaleSequential(d3.interpolateRainbow).domain([-100, 100]); // 更广泛的数据范围const numSteps = 100;const svg = d3.select('#colorRef').append('svg').attr('width', 300).attr('height', 30);const gradient = svg.append('defs').append('linearGradient').attr('id', 'gradient').attr('x1', '0%').attr('x2', '100%').attr('spreadMethod', 'pad');for (let i = 0; i <= numSteps; i++) {gradient.append('stop').attr('offset', i / numSteps).attr('stop-color', rainbowScale(i * (200 / numSteps) - 100));}svg.append('rect').attr('x', 0).attr('y', 0).attr('width', 300).attr('height', 30).style('fill', 'url(#gradient)');

2.scaleOrdinal(domain,range) （序数比例尺）用于将一组离散的值映射到一组有限的输出值的方法

该比例尺通常用于将类别（如颜色、图案等）映射到图表元素（如点、线条、柱状图等）的属性（如颜色、样式等）上。例如，可以使用Ordinal将一组设备类型（如手机、平板电脑、笔记本电等）映射到一组颜色（如红色、绿色、蓝色等）以区分它们在一个图表中的区别。

const color = d3.scaleOrdinal().domain(cityData).range(d3.schemeBlues[9]);

上面写法等同于：const color = d3.scaleOrdinal(d3.schemeBlues[9]).domain(cityData);

等同于：const color = d3.scaleOrdinal(cityData,d3.schemeBlues[9]);

d3.select('#colorRef').selectAll('.color-block').data(cityData).enter().append('div').attr('class', 'color-block').style('background-color', d => color(d)).on('click', function (event, d) {// 在这里可以添加点击颜色块时的交互逻辑console.log('Selected color:', d);});