直线

🌐 Lines

示例 · 线生成器会生成一个 [样条曲线](https://en.wikipedia.org/wiki/Spline_(mathematics) 或 折线，如折线图所示。线条也出现在许多其他可视化类型中，例如 分层边缘打包 中的链接。另请参见 径向线。

line(x, y)

来源 · 使用给定的x和y访问器构造一个新的线生成器。

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)

来源 · 为给定的 data 数组生成一条线。

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

如果线条生成器具有上下文，那么线条将作为一系列path 方法调用呈现到该上下文中，并且此函数返回空值。否则，将返回一个path 数据字符串。

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

小心

根据该折线生成器关联的曲线，在将给定的输入数据传递给折线生成器之前，可能需要按x值对其进行排序。

line.x(x)

来源 · 如果指定了 x，则将 x 访问器设置为指定的函数或数字，并返回此折线生成器。

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];
}

当一条线被生成时，x 访问器将会为输入数据数组中每一个已定义的元素被调用，并传入元素 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)

来源 · 如果指定了 y，则将 y 访问器设置为指定的函数或数字，并返回此折线生成器。

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

当一条线被生成时，y 访问器将会对输入数据数组中每一个定义的元素调用，传递元素 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)

示例 · 来源 · 如果指定了 defined，则将定义的访问器设置为指定的函数或布尔值，并返回此行生成器。

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

当一条线被生成时，定义的访问器将对输入数据数组中的每个元素调用，并将元素 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，则返回当前已定义的访问器。

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

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

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)

来源 · 如果指定了 context，则设置上下文并返回此行生成器。

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。如果上下文不为 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)

来源 · 如果指定了 digits，则设置小数点后的最大位数，并返回此行生成器。

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

如果未指定 digits，则返回当前的最大小数位数，默认值为3。

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

line.digits() // 3

此选项仅在关联的上下文为 null 时适用，例如当此线路生成器用于生成路径数据时。

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