d3.line function
d3.line creates a new line generator for a spline or polyline, as in a line chart.
d3-shape/line
23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
line generator function
A line generator function generates a line for the given dataset.
line.x method
line.x sets the x accessor.
line.y method
line.y sets the y accessor.
line.defined method
line.defined sets the defined accessor.
line.context method
line.context sets the rendering context.
line.digits method
line.digits sets the output precision.
d3.line() constructor signature
d3.line(*x*, *y*) constructs a new line generator with the given x and y accessor functions. If x or y are not specified, the respective defaults will be used.
line(data) generates SVG path or canvas
Calling a line generator with data array produces either an SVG path data string or renders to canvas. If the line generator has a context, the line is rendered to that context as a sequence of path method calls and returns void. Otherwise, a path data string is returned.
line.x(x) accessor setter/getter
line.x(*x*) sets the x accessor to the specified function or number and returns the line generator. If x is not specified, returns the current x accessor. The x accessor defaults to function x(d) { return d[0]; }. The accessor is invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments.
line.y(y) accessor setter/getter
line.y(*y*) sets the y accessor to the specified function or number and returns the line generator. If y is not specified, returns the current y accessor. The y accessor defaults to function y(d) { return d[1]; }. The accessor is invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments.
line.defined(defined) filter for data points
line.defined(*defined*) sets the defined accessor to the specified function or boolean and returns the line generator. If defined is not specified, returns the current defined accessor. When a line is generated, the defined accessor is invoked for each element in the input data array, being passed the element d, the index i, and the array data as three arguments. If the element is defined (accessor returns truthy value), the x and y accessors are evaluated and the point is added to the current line segment. Otherwise, the element is skipped, the current line segment ends, and a new line segment is generated for the next defined point. The defined accessor defaults to the constant true.
line.curve(curve) sets curve factory
line.curve(*curve*) sets the curve factory and returns the line generator. If curve is not specified, returns the current curve factory, which defaults to curveLinear.
line.context(context) for canvas rendering
line.context(*context*) sets the context and returns the line generator. If context is not specified, returns the current context. The context defaults to null. If the context is not null, then the generated line is rendered to this context as a sequence of path method calls. Otherwise, a path data string is returned.
line.digits(digits) sets decimal precision
line.digits(*digits*) sets the maximum number of digits after the decimal separator and returns the line generator. If digits is not specified, returns the current maximum fraction digits, which defaults to 3. This option only applies when the associated context is null, when producing path data strings.
Line chart example with accessors
const line = d3.line((d) => x(d.Date), (d) => y(d.Close)); svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");
Line chart with explicit accessor methods
const line = d3.line() .x((d) => x(d.Date)) .y((d) => y(d.Close));
Line chart with missing data handling
const line = d3.line().defined((d) => !isNaN(d.Close));
Line chart with curve type
const line = d3.line().curve(d3.curveStep);
Line chart rendering to canvas
const context = canvas.getContext("2d"); const line = d3.line().context(context);
Line chart with decimal precision
const line = d3.line().digits(3);
Sort data by x-value before line generation
Depending on the line generator's associated curve, the given input data may need to be sorted by x-value before being passed to the line generator.
Single-point line segments may be invisible
If a line segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. In addition, some curves such as curveCardinalOpen only render a visible segment if it contains multiple points.