Commit 1993686b authored by Mike Bostock's avatar Mike Bostock
Browse files


parent 5ca0f285
......@@ -519,49 +519,39 @@ TODO
## [Interpolators (d3-interpolate)](
The [d3.interpolate]( method no longer delegates to d3.interpolators, which has been removed; its behavior is now defined by the library. Compared to 3.x, d3.interpolate in 4.0 now returns a constant interpolator which always returns the end value *b* if *b* is null, undefined, true or false. It is slightly faster in the common case that *b* is a number. And it only uses [d3.interpolateRgb]( if *b* is a valid CSS color specifier (and not approximately one).
The behavior of [d3.interpolateObject]( and [d3.interpolateArray]( has changed slightly with respect to properties or elements in the start value *a* that do not exist in the end value *b*: these properties and elements are now ignored, such that the ending value of the interpolator at *t* = 1 is now precisely equal to *b*. So, in 3.x:
The generic [d3.interpolate]( method is now faster and more precisely defined, as follows:
d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5}
* If *b* is null, undefined or type "boolean", use the constant *b*.
* If *b* is type "number", use [d3.interpolateNumber](
* If *b* is a d3.color instance or type "string" and can be parsed by d3.color, use d3.interpolateRgb.
* If *b* is type "string", use d3.interpolateString.
* If *b* is [an array](, use d3.interpolateArray.
* Use d3.interpolateObject.
Whereas in 4.0, *a*.bar is ignored:
What is the net impact of this change, though? Faster. Better behavior if *b* is a boolean, null or undefined. Better detection of colors using d3.color.
d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5}
d3.interpolators ↦ REMOVED; d3.interpolate is no longer extensible.
If *a* or *b* are undefined or not an object, they are now implicitly converted to the empty object or empty array as appropriate, rather than throwing a TypeError.
new transform interpolation methods for CSS, as well as SVG. d3-transition automatically picks the right one…
The d3.interpolateTransform interpolator has been renamed to [d3.interpolateTransformSvg](, and there is a new [d3.interpolateTransformCss]( to interpolate CSS transforms! This allows [d3-transition](#transitions-d3-transition) to automatically select the right interpolator for both SVG’s [transform attribute]( and the CSS [transform style property]( (Note, however, that only 2D CSS transforms are supported.) The d3.transform method has been removed.
* d3.transform ↦ REMOVED
* d3.interpolateTransform ↦ d3.interpolateTransformSvg
* new d3.interpolateTransformCss
Color space interpolators now interpolate opacity; see [d3-color](#colors-d3-color). Color interpolators now return rgb(…) or rgba(…) CSS color specifier strings, matching [*color*.toString](, rather than using the RGB hexadecimal format. This is necessary to support opacity interpolation, but is also beneficial because it matches CSS computed values.
b-spline interpolation
When a channel in the start color *a* is undefined, color interpolators use the corresponding value from the end color *b*, or *vice versa*. This logic previously applied to some channels (such as saturation in HSL), but now applies to all channels in all color spaces, and is especially useful when interpolating to or from transparent. There are now “long” versions of cylindrical color space interpolators: [d3.interpolateHslLong](, [d3.interpolateHclLong]( and [d3.interpolateCubehelixLong]( These interpolators use linear interpolation of hue, rather than using the shortest path around the 360° hue circle. See [d3.interpolateRainbow]( for an example.
* add d3.quantize
* add d3.interpolateBasis
* add d3.interpolateBasisClosed
* add d3.interpolateRgbBasis
* add d3.interpolateRgbBasisClosed
The Cubehelix color space is now supported by [d3-color](#colors-d3-color), and so there are now [d3.interpolateCubehelix]( and [d3.interpolateCubehelixLong]( interpolators.
color space interpolation
[Gamma-corrected color interpolation]( is now supported for both RGB and Cubehelix color spaces as [*interpolate*.gamma]( For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space:
* color interpolation now observes opacity (see d3-color)!
* better, more consistent behavior when either *a* or *b*’s color channel is undefined
* add “long” versions of interpolators for color spaces with hue angles
* Cubehelix (with optional gamma parameter) is now supported by default
* color interpolators now return rgb(…) or rgba(…) strings (matching *color*.toString)
* use named parameters, e.g., d3.interpolateCubehelixGamma ↦ d3.interpolateCubehelix.gamma
* new d3.interpolateRgb.gamma for gamma-corrected RGB interpolation
var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange");
better object and array interpolation…
There are new interpolators for uniform non-rational [B-splines](! These are useful for smoothly interpolating between an arbitrary sequence of values from *t* = 0 to *t* = 1, such as to generate a smooth color gradient from a discrete set of colors. The [d3.interpolateBasis]( and [d3.interpolateBasisClosed]( interpolators generate one-dimensional B-splines, while [d3.interpolateRgbBasis]( and [d3.interpolateRgbBasisClosed]( generate three-dimensional B-splines through RGB color space. These are used by [d3-scale-chromatic]( to generate continuous color scales from ColorBrewer’s discrete color schemes, such as [PiYG](
* when *b* has fewer properties or elements than *a*
* when *a* or *b* is undefined or not an object or array
There’s also now a [d3.quantize]( method for generating uniformly-spaced discrete samples from a continuous interpolator. This is useful for taking one of the built-in color scales (such as [d3.interpolateViridis]( and quantizing it for use with [d3.scaleQuantize](, [d3.scaleQuantile]( or [d3.scaleThreshold](
## [Paths (d3-path)](
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment