Lines

Examples · The line generator produces a spline or polyline as in a line chart. Lines also appear in many other visualization types, such as the links in hierarchical edge bundling. See also radial lines.

line(x, y)

Source · Constructs a new line generator with the given x and y accessor.

const line = d3.line((d) => x(d.Date), (d) => y(d.Close));

If x or y are not specified, the respective defaults will be used. The above can be expressed more explicitly as:

const line = d3.line()
    .x((d) => x(d.Date))
    .y((d) => y(d.Close));

line(data)

Source · Generates a line for the given array of data.

svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");

If the line generator has a context, then the line is rendered to this context as a sequence of path method calls and this function returns void. Otherwise, a path data string is returned.

CAUTION

Depending on this line generator’s associated curve, the given input data may need to be sorted by x-value before being passed to the line generator.

line.x(x)

Source · If x is specified, sets the x accessor to the specified function or number and returns this line generator.

const line = d3.line().x((d) => x(d.Date));

If x is not specified, returns the current x accessor.

line.x() // (d) => x(d.Date)

The x accessor defaults to:

function x(d) {
  return d[0];
}

When a line is generated, the x accessor will be 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.

The default x accessor assumes that the input data are two-element arrays of numbers. If your data are in a different format, or if you wish to transform the data before rendering, then you should specify a custom accessor.

line.y(y)

Source · If y is specified, sets the y accessor to the specified function or number and returns this line generator.

const line = d3.line().y((d) => y(d.Close));

When a line is generated, the y accessor will be 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.

If y is not specified, returns the current y accessor.

line.y() // (d) => y(d.Close)

The y accessor defaults to:

function y(d) {
  return d[1];
}

The default y accessor assumes that the input data are two-element arrays of numbers. See line.x for more information.

line.defined(defined)

Examples · Source · If defined is specified, sets the defined accessor to the specified function or boolean and returns this line generator.

const line = d3.line().defined((d) => !isNaN(d.Close));

When a line is generated, the defined accessor will be 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 given element is defined (i.e., if the defined accessor returns a truthy value for this element), the x and y accessors will subsequently be evaluated and the point will be added to the current line segment. Otherwise, the element will be skipped, the current line segment will be ended, and a new line segment will be generated for the next defined point.

If defined is not specified, returns the current defined accessor.

line.defined() // (d) => !isNaN(d.Close)

The defined accessor defaults to the constant true, and assumes that the input data is always defined:

function defined() {
  return true;
}

Note that 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.

line.curve(curve)

Source · If curve is specified, sets the curve factory and returns this line generator.

const line = d3.line().curve(d3.curveStep);

If curve is not specified, returns the current curve factory, which defaults to curveLinear.

line.curve() // d3.curveStep

line.context(context)

Source · If context is specified, sets the context and returns this line generator.

const context = canvas.getContext("2d");
const line = d3.line().context(context);

If context is not specified, returns the current context.

line.context() // 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 representing the generated line is returned.

line.digits(digits)

Source · If digits is specified, sets the maximum number of digits after the decimal separator and returns this line generator.

const line = d3.line().digits(3);

If digits is not specified, returns the current maximum fraction digits, which defaults to 3.

line.digits() // 3

This option only applies when the associated context is null, as when this line generator is used to produce path data.