毕设做系统与网站答辩,wordpress个人模板,构建微网站,百度联盟app学习传送门#xff1a;Sequential scales | D3 by Observable
1.scaleSequential(domain, interpolator)#xff08;连续比例尺#xff09;
是一种在D3.js中用于将一个范围内的连续值射到另一个范围内的连续值的方法。该比例尺通常用于将数值型数据映射到图表元素的属性上…
学习传送门Sequential scales | D3 by Observable
1.scaleSequential(domain, interpolator)连续比例尺
是一种在D3.js中用于将一个范围内的连续值射到另一个范围内的连续值的方法。该比例尺通常用于将数值型数据映射到图表元素的属性上例如颜色、大小、透明度等。它通常会根据所提供的输入和输出范生成一个可以将一个连续输入域映射到一个输出范围的函数使用该函数对图表元素进行样式设置。
1.盒子容器 span idcolor颜色/span div idcolorRef refcolorRef :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 到 1const 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);}); 这里需要加一个css样式 .colorRef { width: 400px; height: 100px; border: 1px solid pink; box-sizing: border-box; display: flex; .color-block { flex: 1; } } 以上大致是d3对于色卡的基本使用具体可参照官网自行测试
