d3-shape areas section
The d3-shape module includes an area section for areas defined by a bounding topline and baseline, as in an area chart.
d3-shape/area
31 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
d3.area - create a new area generator
d3.area creates a new area generator for drawing area shapes.
area.x - set the x0 and x1 accessors
The area.x method sets both the x0 (baseline x) and x1 (topline x) accessors on an area generator.
area.x0 - set the baseline x accessor
The area.x0 method sets the baseline x accessor for an area generator.
area.x1 - set the topline x accessor
The area.x1 method sets the topline x accessor for an area generator.
area.y - set the y0 and y1 accessors
The area.y method sets both the y0 (baseline y) and y1 (topline y) accessors on an area generator.
area.y0 - set the baseline y accessor
The area.y0 method sets the baseline y accessor for an area generator.
area.y1 - set the topline y accessor
The area.y1 method sets the topline y accessor for an area generator.
area.defined - set the defined accessor
The area.defined method sets the defined accessor for an area generator, which determines whether a point should be included in the area.
area.context - set the rendering context
The area.context method sets the rendering context for an area generator.
area.digits - set the output precision
The area.digits method sets the output precision for an area generator.
area.lineX0 - derive a line for the left edge of an area
The area.lineX0 method derives a line generator for the left edge of an area.
area.lineY0 - derive a line for the top edge of an area
The area.lineY0 method derives a line generator for the top edge of an area.
area.lineX1 - derive a line for the right edge of an area
The area.lineX1 method derives a line generator for the right edge of an area.
area.lineY1 - derive a line for the bottom edge of an area
The area.lineY1 method derives a line generator for the bottom edge of an area.
d3.area() basic constructor signature
d3.area(x, y0, y1) constructs a new area generator with optional x, y0, and y1 accessors or numbers. The area generator can also be constructed without arguments as d3.area() and configured via chainable methods. Example: const area = d3.area((d) => x(d.Date), y(0), (d) => y(d.Close));
Area generator rendering to SVG or canvas
area(data) generates an area for the given array of data. If a context is set, the area is rendered as canvas path method calls and returns void. Otherwise, a path data string is returned that can be used with SVG path elements via .attr('d', area(data)).
area.x() - set x-value accessor
area.x(x) sets x0 to x and x1 to null, returning the area generator for chaining. If x is not specified, returns the current x0 accessor. Example: area.x((d) => x(d.Date)). This is for horizontally-oriented areas where both the topline and baseline share the same x-values.
area.x0() - set baseline x-accessor
area.x0(x) sets the x0 accessor to the specified function or number and returns the area generator. The accessor is invoked for each defined element with arguments (d, i, data). Defaults to function x(d) { return d[0]; }, assuming input data are two-element arrays [[x0, y0], [x1, y1], …]. Intended for vertically-oriented areas.
area.x1() - set topline x-accessor
area.x1(x) sets the x1 accessor to the specified function or number and returns the area generator. The accessor is invoked for each defined element with arguments (d, i, data). Defaults to null, indicating the previously-computed x0 value should be reused; this default is intended for horizontally-oriented areas. Intended for vertically-oriented areas.
area.y() - set y-value accessor
area.y(y) sets y0 to y and y1 to null, returning the area generator for chaining. If y is not specified, returns the current y0 accessor. Example: area.y((d) => y(d.Date)). This is intended for vertically-oriented areas where time goes down rather than right.
area.y0() - set baseline y-accessor
area.y0(y) sets the y0 accessor to the specified function or number and returns the area generator. The accessor is invoked for each defined element with arguments (d, i, data). Defaults to function y() { return 0; }. For horizontally-oriented areas with a constant baseline, y0 is typically set to the y scale's output for zero. In default SVG coordinates, the default zero represents the top of the chart, producing a flipped (hanging) area.
area.y1() - set topline y-accessor
area.y1(y) sets the y1 accessor to the specified function or number and returns the area generator. The accessor is invoked for each defined element with arguments (d, i, data). Defaults to function y(d) { return d[1]; }, assuming input data are two-element arrays [[x0, y0], [x1, y1], …]. A null accessor indicates the previously-computed y0 value should be reused, used for vertically-oriented areas.
area.defined() - control segment generation
area.defined(defined) sets the defined accessor to a function or boolean and returns the area generator. The accessor is invoked for each element with arguments (d, i, data). If the accessor returns a truthy value, the point is added to the current segment. If falsy, the current segment ends and a new segment starts for the next defined point. This allows the generated area to have discrete segments. Defaults to function defined() { return true; }.
area.curve() - set curve factory
area.curve(curve) sets the curve factory and returns the area generator. If curve is not specified, returns the current curve factory, which defaults to curveLinear. Example: area.curve(d3.curveStep). The curve controls how the area is interpolated between points.
area.context() - render to canvas or SVG
area.context(context) sets the rendering context and returns the area generator. If context is not specified, returns the current context, which defaults to null. If context is null, area generation returns SVG path data string. If context is set (e.g., canvas.getContext('2d')), the area is rendered as canvas path method calls and returns void.
area.digits() - set path data precision
area.digits(digits) sets the maximum number of digits after the decimal separator and returns the area generator. If digits is not specified, returns the current maximum fraction digits, which defaults to 3. This option only applies when the context is null, for SVG path data generation.
area.lineY0() - extract baseline line
area.lineY0() returns a new line generator that shares this area generator's defined accessor, curve, and context. The returned line's x-accessor is this area's x0-accessor and y-accessor is this area's y0-accessor, representing the baseline of the area.
area.lineY1() - extract topline line
area.lineY1() returns a new line generator that shares this area generator's defined accessor, curve, and context. The returned line's x-accessor is this area's x0-accessor and y-accessor is this area's y1-accessor, representing the topline of the area.
Area generator topline and baseline rendering order
The topline is defined by x1 and y1 and is rendered first. The baseline is defined by x0 and y0 and is rendered second with points in reverse order. With curveLinear, this produces a clockwise polygon.
Area generator data sorting requirement
Depending on the area generator's associated curve, the given input data may need to be sorted by x-value before being passed to the area generator.