在d3.js中反转颜色标度 [英] Invert a color scale in d3.js

问题描述

可以在d3中创建一个具有颜色域和数字范围的缩放吗？

Is it possible to create a scale in d3 with a color domain and a number range?

我尝试了以下操作：

  var colorScale = d3.scale.linear().range(["red", "white"]).domain([3, 9.5])
  console.log('cs:', colorScale(4));
  console.log('cs:', colorScale.invert(colorScale(4)));

但输出不是很令人鼓舞：

But the output isn't very encouraging:

cs: #ff2727
cs: NaN

这是不可能的任务还是我做错了什么？

Is this an impossible task or am I doing something wrong?

推荐答案

根据文档：

注意：仅当输出范围是数字时，才支持反转运算符！ D3允许输出范围为任何类型;在引擎盖下，d3.interpolate或您选择的自定义插值器用于将标准化参数t映射到输出范围中的值。因此，输出范围可以是颜色，字符串或甚至任意对象。由于没有任何工具来解释任意类型，所以目前仅支持数字范围的反转运算符。

Note: the invert operator is only supported if the output range is numeric! D3 allows the output range to be any type; under the hood, d3.interpolate or a custom interpolator of your choice is used to map the normalized parameter t to a value in the output range. Thus, the output range may be colors, strings, or even arbitrary objects. As there is no facility to "uninterpolate" arbitrary types, the invert operator is currently supported only on numeric ranges.

不能这样做。

这篇关于在d3.js中反转颜色标度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！