作者Observable

外观

线条 ​

示例 · 线生成器生成一个 样条曲线 或 折线，如折线图所示。线条还出现在许多其他可视化类型中，例如 层次边捆绑 中的链接。另请参阅 径向线。

line(x, y) ​

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

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

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

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

line(data) ​

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

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

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

警告

根据此线生成器关联的 曲线，给定的输入 data 可能需要在传递给线生成器之前按 x 值排序。

line.x(x) ​

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

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

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

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

x 访问器的默认值为

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

当生成一条线时，x 访问器将为输入数据数组中的每个 已定义 元素调用，并将元素 d、索引 i 和数组 data 作为三个参数传递。

默认的 x 访问器假设输入数据是包含两个数字的数组。如果您的数据采用其他格式，或者您希望在渲染之前转换数据，那么您应该指定一个自定义访问器。

line.y(y) ​

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

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

当生成一条线时，y 访问器将为输入数据数组中的每个 已定义 元素调用，并将元素 d、索引 i 和数组 data 作为三个参数传递。

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

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

y 访问器的默认值为

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

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

line.defined(defined) ​

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

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

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

如果未指定 defined，则返回当前已定义访问器。

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

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

js
function defined() {
  return true;
}

请注意，如果线段仅包含一个点，则它可能不可见，除非使用圆形或方形 线帽 渲染。此外，一些曲线（例如 curveCardinalOpen）仅在包含多个点时才渲染可见段。

line.curve(curve) ​

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

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

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

js
line.curve() // d3.curveStep

line.context(context) ​

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

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

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

js
line.context() // context

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

line.digits(digits) ​

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

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

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

js
line.digits() // 3

此选项仅适用于关联的 context 为 null 的情况，例如当此线生成器用于生成 路径数据 时。