NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #528 most downloaded on npm
Graphical primitives for visualization, such as lines and areas.
Last release 4 years ago
no release in 18 months
Release timing varies
gaps range from 2 weeks to 1.3 years
Most releases are documented
notes for 32 of 41 stable releases
Nothing withdrawn
no release was ever pulled
11 years old
42 releases · first in 2015
Add arc .digits, area .digits, line .digits, link .digits, and symbol .digits. #204 #205
One column per quarter.
Add d3.symbolsFill , replacing (deprecating) d3.symbols.
Update dependencies. Make build reproducible.
This package now requires Node.js 12 or higher. For more, please read Sindre Sorhus’s FAQ .
This package now requires Node.js 12 or higher. For more, please read Sindre Sorhus’s FAQ.
Add d3.curveBumpX and d3.curveBumpY . Thanks, @Fil ! #152
Accept iterables wherever appropriate.
This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-shape 1.x or use a transpiler.
Nothing published for this version
Fix stacking of zero values in d3.stackOffsetDiverging . #140
Adopt explicit files for publishing.
Fix d3.stackDivergingOffset when there is only one series. #114
Fix rendering glitch with rounded arcs.
Fix d3.stackOrderInsideOut to use appearance (onset) rather than sum.
Change d3.stackOrderAppearance to use maximum, rather than first non-zero, value.
Add d3.stackOrderAppearance. Thanks, @isaomatsunami!
Fix rendering glitch with rounded arcs.
Nothing published for this version
Nothing published for this version
Add d3.areaRadial; deprecate d3.radialArea.
Fix d3.linkRadial to use radians rather than degrees.
Add d3.stackOffsetDiverging. (#95, #96)
Nothing published for this version
Maybe make rounded arcs a little more robust.
Nothing published for this version
Fix benign bug in d3.curveCatmullRom (#78).
Add module entry point to package.json.
module entry point to package.json.Nothing published for this version
Pursuant to the great namespace flattening:
Pursuant to the great namespace flattening:
Shapes are no longer limited to SVG; they can now render to Canvas! Shape generators now support an optional context: given a CanvasRenderingContext2D, you can render a shape as a canvas path to be filled or stroked. For example, a canvas pie chart might use an arc generator:
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0)
.context(context);
To render an arc for a given datum d:
context.beginPath();
arc(d);
context.fill();
See line.context, area.context and arc.context for more. Under the hood, shapes use d3-path to serialize canvas path methods to SVG path data when the context is null; thus, shapes are optimized for rendering to canvas. You can also now derive lines from areas. The line shares most of the same accessors, such as line.defined and line.curve, with the area from which it is derived. For example, to render the topline of an area, use area.lineY1; for the baseline, use area.lineY0.
4.0 introduces a new curve API for specifying how line and area shapes interpolate between data points. The line.interpolate and area.interpolate methods have been replaced with line.curve and area.curve. Curves are implemented using the curve interface rather than as a function that returns an SVG path data string; this allows curves to render to either SVG or Canvas. In addition, line.curve and area.curve now take a function which instantiates a curve for a given context, rather than a string. The full list of equivalents:
But that’s not all! 4.0 now provides parameterized Catmull–Rom splines as proposed by Yuksel et al.. These are available as d3.curveCatmullRom, d3.curveCatmullRomClosed and d3.curveCatmullRomOpen.
<img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/catmullRom.png" width="888" height="240" alt="catmullRom"> <img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/catmullRomOpen.png" width="888" height="240" alt="catmullRomOpen"> <img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/catmullRomClosed.png" width="888" height="330" alt="catmullRomClosed">
Each curve type can define its own named parameters, replacing line.tension and area.tension. For example, Catmull–Rom splines are parameterized using catmullRom.alpha and defaults to 0.5, which corresponds to a centripetal spline that avoids self-intersections and overshoot. For a uniform Catmull–Rom spline instead:
var line = d3.line()
.curve(d3.curveCatmullRom.alpha(0.5));
4.0 fixes the interpretation of the cardinal spline tension parameter, which is now specified as cardinal.tension and defaults to zero for a uniform Catmull–Rom spline; a tension of one produces a linear curve. The first and last segments of basis and cardinal curves have also been fixed! The undocumented interpolate.reverse field has been removed. Curves can define different behavior for toplines and baselines by counting the sequence of curve.lineStart within curve.areaStart. See the d3.curveStep implementation for an example.
4.0 fixes numerous bugs in the monotone curve implementation, and introduces d3.curveMonotoneY; this is like d3.curveMonotoneX, except it requires that the input points are monotone in y rather than x, such as for a vertically-oriented line chart. The new d3.curveNatural produces a natural cubic spline. The default β for d3.curveBundle is now 0.85, rather than 0.7, matching the values used by Holten. 4.0 also has a more robust implementation of arc padding; see arc.padAngle and arc.padRadius.
4.0 introduces a new symbol type API. Symbol types are passed to symbol.type in place of strings. The equivalents are:
The full set of symbol types is now:
<a href="#symbolCircle"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/circle.png" width="100" height="100"></a><a href="#symbolCross"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/cross.png" width="100" height="100"></a><a href="#symbolDiamond"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/diamond.png" width="100" height="100"></a><a href="#symbolSquare"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/square.png" width="100" height="100"></a><a href="#symbolStar"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/star.png" width="100" height="100"></a><a href="#symbolTriangle"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/triangle.png" width="100" height="100"><a href="#symbolWye"><img src="https://raw.githubusercontent.com/d3/d3-shape/master/img/wye.png" width="100" height="100"></a>
Lastly, 4.0 overhauls the stack layout API, replacing d3.layout.stack with d3.stack. The stack generator now longer needs an x-accessor. In addition, the API has been simplified: the stack generator now accepts tabular input, such as this array of objects:
var data = [
{month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
{month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
{month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400},
{month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400}
];
To generate the stack layout, first define a stack generator, and then apply it to the data:
var stack = d3.stack()
.keys(["apples", "bananas", "cherries", "dates"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
var series = stack(data);
The resulting array has one element per series. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline:
[
[[ 0, 3840], [ 0, 1600], [ 0, 640], [ 0, 320]], // apples
[[3840, 5760], [1600, 3040], [ 640, 1600], [ 320, 800]], // bananas
[[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries
[[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates
]
Each series in then typically passed to an area generator to render an area chart, or used to construct rectangles for a bar chart. Stack generators no longer modify the input data, so stack.out has been removed.
For an introduction to shapes, see Introducing d3-shape.
See CHANGES for all D3 changes since 3.x.
Nothing published for this version
Export to the global d3 in vanilla environments (d3/d3#2840).
d3 in vanilla environments (d3/d3#2840).Simpler symmetry for d3.curveStepAfter and d3.curveStepBefore.
Adopt named parameters for curves, such as _cardinal_.tension (#61).
Nothing published for this version
Replace curveMonotone with curveMonotoneX and curveMonotoneY (#57).
Better handling of NaN values in stacks.
Ensure stepBefore and stepAfter are symmetric in _x_.
Nothing published for this version
The arc generator is now more tolerant of floating point error.
Add radialLine and radialArea (#25, #26).
Add cubic monotone interpolation (#38). Thanks, @jviide!
Rename line.interpolate to line.curve.
Change everything about how line interpolation works.
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →