时间戳

首页 > 解决方案 > 使用 D3 Scales 将颜色转换为数字

javascript - 使用 D3 Scales 将颜色转换为数字

问题描述

我想将此配色方案作为我的输入域： 在此处输入图像描述

和之间的值0 and 1作为我的输出范围。但是，我不确定要使用哪种类型的比例或如何将方案添加为输入域。

下面的代码与我正在尝试做的相反。

let scaleSequential1 = d3.scaleSequential()
  .domain([0, 1])
  .interpolator(d3.interpolateViridis);

console.log( scaleSequential1(0) ); //#440154
console.log( scaleSequential1(0.5) ); //#21918c
console.log( scaleSequential1(1) ); //#fde725

标签： javascriptd3.js

解决方案

跟进我的评论，没有直接的方法可以做到这一点。如果你喜欢这个，你可以破解它。如果您要经常调用它，我会用闭包包裹起来以节省.map...

function invertViridis(color){
  return d3.range(0, 1.01, 0.01).map(i => d3.interpolateViridis(i)).indexOf(color) / 100;
}

console.log(invertViridis("#440154"));
console.log(invertViridis("#3b528b"));
console.log(invertViridis("#21918c"));
console.log(invertViridis("#5ec962"));
console.log(invertViridis("#fde725"));

function invertViridisClosure(){
  var r = d3.range(0, 1.01, 0.01).map(i => d3.interpolateViridis(i));
  return function(color) {
    return r.indexOf(color) / 100;
  }
}

let f = invertViridisClosure();
console.log(f("#440154"));
console.log(f("#3b528b"));
console.log(f("#21918c"));
console.log(f("#5ec962"));
console.log(f("#fde725"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

推荐阅读