直线

¥Lines

示例 · 线生成器生成类似折线图的 spline 或 polyline 线。线条也出现在许多其他可视化类型中，例如 分层边缘打包 中的链接。另请参阅 径向线。

¥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)

源代码 · 使用给定的 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));

如果未指定 x 或 y，则将使用相应的默认值。以上内容可以更明确地表达为：

¥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) {#_line}

源代码 · 根据给定的数据数组生成一条线。

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

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

如果线生成器具有 context，则该线将作为一系列 路径方法 调用渲染到此上下文，并且此函数返回 void。否则，返回一个 路径数据 字符串。

¥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

根据此线生成器关联的 curve，给定的输入数据可能需要按 x 值排序后才能传递给线生成器。

¥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) {#line_x}

源代码 · 如果指定了 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));

如果未指定 x，则返回当前 x 访问器。

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

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

x 访问器默认为：

¥The x accessor defaults to:

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

当线段为 generated 时，x 访问器将针对输入数据数组中的每个 defined 元素调用，并传递元素 d、索引 i 和数组 data 作为三个参数。

¥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.

默认的 x 访问器假定输入数据是包含两个元素的数字数组。如果你的数据采用不同的格式，或者你希望在渲染之前转换数据，则应指定自定义访问器。

¥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) {#line_y}

源代码 · 如果指定了 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));

当线段为 generated 时，y 访问器将针对输入数据数组中的每个 defined 元素调用，并传递元素 d、索引 i 和数组 data 作为三个参数。

¥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.

如果未指定 y，则返回当前的 y 访问器。

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

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

y 访问器默认为：

¥The y accessor defaults to:

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

默认的 y 访问器假定输入数据是包含两个元素的数字数组。有关更多信息，请参阅 line.x。

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

line.defined(defined) {#line_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));

当线段为 generated 时，定义的访问器将针对输入数据数组中的每个元素调用，并传递元素 d、索引 i 和数组 data 作为三个参数。如果给定元素已定义（即，如果定义的访问器返回该元素的真值），则随后将评估 x 和 y 访问器，并将该点添加到当前线段。否则，将跳过该元素，结束当前线段，并为下一个定义点生成新的线段。

¥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.

如果未指定 Defined，则返回当前 Defined 的访问器。

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

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

定义的访问器默认为常量 true，并假定输入数据始终已定义：

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

function defined() {
  return true;
}

请注意，如果线段仅由一个点组成，则除非使用圆角或方形 线帽 渲染，否则它可能看起来不可见。此外，某些曲线（例如 curveCardinalOpen）仅当包含多个点时才会渲染可见的线段。

¥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) {#line_curve}

源代码 · 如果指定了 curve，则设置 曲线工厂 并返回线生成器。

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

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

如果未指定 curve，则返回当前曲线工厂，默认为 curveLinear。

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

line.curve() // d3.curveStep

line.context(context) {#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);

如果未指定 context，则返回当前上下文。

¥If context is not specified, returns the current context.

line.context() // context

上下文默认为 null。如果上下文不为空，则 生成的线 将作为一系列 路径方法 调用渲染到此上下文。否则，返回一个表示生成的线的 路径数据 字符串。

¥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) {#line_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);

如果未指定数字，则返回当前最大分数数字，默认为 3。

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

line.digits() // 3

此选项仅当关联的 context 为空时适用，例如使用此行生成器生成 路径数据 时。

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