interpolators.md

Interpolators

Built-in interpolator factories for continuous scale.

Usage

# createInterpolateNumber(a: number, b: number) => Interpolate

The default interpolate factory for continuous scales which returns a number interpolator.

import { Linear, createInterpolateNumber } from '@antv/scale';

const x = new Linear({ interpolate: createInterpolateNumber });

x.map(0.5); // 0.5;

createInterpolateNumber(0, 1)(0.5); // 0.5;

# createInterpolateColor(a: string, b: string) => Interpolate

The css color interpolate factory for continuous scales which returns a color interpolator.

import { Linear, createInterpolateColor } from '@antv/scale';

const x = new Linear({
  interpolate: createInterpolateColor,
  range: ['red', 'blue'],
});

x.map(0.5); // rgba(128, 0, 128, 1);

createInterpolateNumber('red', 'blue')(0.5); // rgba(128, 0, 128, 1);

# createInterpolateNumber(a: number, b: number) => Interpolate

The value interpolate factory which can interpolate numbers and colors depending on input type.

import { Linear, createInterpolateValue } from '@antv/scale';

const x = new Linear({
  interpolate: createInterpolateValue,
});

x.map(0.5); // 0.5;
createInterpolateValue(0, 1)(0.5); // 0.5;

x.update({
  range: ['hsl(0, 100%, 50%)', 'hsl(240, 100%, 50%)'],
});

x.map(0.5); // rgba(128, 0, 128, 1)
createInterpolateValue('hsl(0, 100%, 50%)', 'hsl(240, 100%, 50%)')(0.5); // 0.5;