d3 / d3-interpolate

Interpolate numbers, colors, strings, arrays, objects, whatever!

Home Page:https://d3js.org/d3-interpolate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: changing the default color interpolation method

Fil opened this issue · comments

Scenario: I want to create an interpolator between two objects a = {color: "red"} and b = {color:"lightblue"}.

d3.interpolate(a,b) sees that these properties are colors, and defaults to the hard-coded rgb (https://github.com/d3/d3-interpolate/blob/master/src/value.js#L15) method. Is there a way to override that default and use a gamma-corrected interpolateRgb (#14) or interpolateLab instead of rgb?

Unless I'm missing something, I don't see how to override this. (It doesn't even look possible to monkey-patch with d3.interpolateRgb = d3.interpolateLab, which I would not recommend anyway :))

A possible syntax might be d3.interpolate.color(d3.interpolateLab)(…), or maybe more generically d3.interpolate.delegate("color", d3.interpolateLab)(…), which could also work for numbers, strings, whatever…

https://observablehq.com/d/7f6b33e509e0e698

I think what we’re missing, as well, is a d3.interpolateLinearRgb that is the equivalent of color-interpolation: linearRGB in CSS (see color conversion sample code).

I’m not sure we should change the default behavior to be different than CSS, even if interpolation within sRGB (especially without gamma correction) is obviously wrong… but maybe. In any case, I agree it would be lovely to have some elegant means of telling transitions to use a different default interpolator for color.

In the same vein, it would be nice to be able to substitute the default ("number") interpolation method called by interpolateString, for one that, for example would limit the digits (e.g. +v.toFixed(2)).

It looks like it could also be done with the d3.interpolate.delegate syntax (or similar).

a similar approach (different syntax but same purpose) was proposed in #43