CODEWITHSUNDEEP
d3.js
juniper-
juniper-

Reputation: 6562

Invert a color scale in d3.js

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

I tried the following:

  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?

Upvotes: 3

Views: 2741

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

According to the documentation:

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.

So no, you can't do this.

Upvotes: 5

Related Questions