曲线

¥Curves

曲线将 line 或 area 的离散（逐点）表示转换为连续形状：curves 指定如何在二维 [x, y] 点之间进行插值。

¥Curves turn a discrete (pointwise) representation of a line or area into a continuous shape: curves specify how to interpolate between two-dimensional [x, y] points.

曲线通常不直接构建或使用。相反，其中一条内置曲线被传递给 line.curve 或 area.curve。

¥Curves are typically not constructed or used directly. Instead, one of the built-in curves is being passed to line.curve or area.curve.

const line = d3.line()
    .x((d) => x(d.date))
    .y((d) => y(d.value))
    .curve(d3.curveCatmullRom.alpha(0.5));

如果需要，你可以实现 自定义曲线。有关直接使用曲线的示例，请参阅 上下文到曲线。

¥If desired, you can implement a custom curve. For an example of using a curve directly, see Context to Curve.

curveBasis(context)

源代码 · 使用指定的控制点生成三次 基样条函数。第一个点和最后一个点被重复三遍，使得样条曲线从第一个点开始，到最后一个点结束，并且与第一个点和第二个点之间的线以及倒数第二个点和最后一个点之间的线相切。

¥Source · Produces a cubic basis spline using the specified control points. The first and last points are triplicated such that the spline starts at the first point and ends at the last point, and is tangent to the line between the first and second points, and to the line between the penultimate and last points.

curveBasisClosed(context)

源代码 · 使用指定的控制点生成闭合的三次 基样条函数。当线段结束时，前三个控制点会重复，形成一个具有 C2 连续性的闭环。

¥Source · Produces a closed cubic basis spline using the specified control points. When a line segment ends, the first three control points are repeated, producing a closed loop with C2 continuity.

curveBasisOpen(context)

源代码 · 使用指定的控制点生成三次 基样条函数。Unlike basis, the first and last points are not repeated, and thus the curve typically does not intersect these points.

¥Source · Produces a cubic basis spline using the specified control points. Unlike basis, the first and last points are not repeated, and thus the curve typically does not intersect these points.

curveBumpX(context)

源代码 · 在每对点之间生成一条贝塞尔曲线，每个点都有水平切线。

¥Source · Produces a Bézier curve between each pair of points, with horizontal tangents at each point.

curveBumpY(context)

源代码 · 在每对点之间生成一条贝塞尔曲线，每个点都有垂直切线。

¥Source · Produces a Bézier curve between each pair of points, with vertical tangents at each point.

curveBundle(context)

源代码 · 使用指定的控制点生成一条拉直的三次 基样条函数 函数，样条曲线根据曲线的 beta 函数拉直，默认为 0.85。此曲线通常在 分层边缘打包 中用于消除连接歧义，正如 Danny Holten 在 分层边束：层次数据中邻接关系的可视化 中提出的一样。此曲线未实现 curve.areaStart 和 curve.areaEnd；它旨在与 d3.line 配合使用，而不是 d3.area。

¥Source · Produces a straightened cubic basis spline using the specified control points, with the spline straightened according to the curve’s beta, which defaults to 0.85. This curve is typically used in hierarchical edge bundling to disambiguate connections, as proposed by Danny Holten in Hierarchical Edge Bundles: Visualization of Adjacency Relations in Hierarchical Data. This curve does not implement curve.areaStart and curve.areaEnd; it is intended to work with d3.line, not d3.area.

curveBundle.beta(beta) {#curveBundle_beta}

Beta:0.85

源代码 · 返回一个束曲线，其指定的 beta 值在 [0, 1] 范围内，表示束强度。如果 beta 等于零，则在第一个点和最后一个点之间生成一条直线；如果 beta 等于 1，则生成标准 basis 样条曲线。例如：

¥Source · Returns a bundle curve with the specified beta in the range [0, 1], representing the bundle strength. If beta equals zero, a straight line between the first and last point is produced; if beta equals one, a standard basis spline is produced. For example:

const line = d3.line().curve(d3.curveBundle.beta(0.5));

curveCardinal(context)

源代码 · 使用指定的控制点生成三次 基数样条函数，并对第一段和最后一段使用单侧差分。默认的 tension 为 0。

¥Source · Produces a cubic cardinal spline using the specified control points, with one-sided differences used for the first and last piece. The default tension is 0.

curveCardinalClosed(context)

源代码 · 使用指定的控制点生成闭合的三次 基数样条函数。当线段结束时，前三个控制点会重复，形成一个闭环。默认的 tension 为 0。

¥Source · Produces a closed cubic cardinal spline using the specified control points. When a line segment ends, the first three control points are repeated, producing a closed loop. The default tension is 0.

curveCardinalOpen(context)

源代码 · 使用指定的控制点生成三次 基数样条函数。Unlike curveCardinal, one-sided differences are not used for the first and last piece, and thus the curve starts at the second point and ends at the penultimate point.默认的 tension 为 0。

¥Source · Produces a cubic cardinal spline using the specified control points. Unlike curveCardinal, one-sided differences are not used for the first and last piece, and thus the curve starts at the second point and ends at the penultimate point. The default tension is 0.

curveCardinal.tension(tension) {#curveCardinal_tension}

Tension:0.00

源代码 · 返回一个基数曲线，其指定的张力值在 [0, 1] 范围内。张力决定切线的长度：张力为 1 时，切线全为零，等同于 curveLinear；张力为 0 时，切线均匀分布，形成均匀的 Catmull-Rom 样条曲线。例如：

¥Source · Returns a cardinal curve with the specified tension in the range [0, 1]. The tension determines the length of the tangents: a tension of one yields all zero tangents, equivalent to curveLinear; a tension of zero produces a uniform Catmull–Rom spline. For example:

const line = d3.line().curve(d3.curveCardinal.tension(0.5));

curveCatmullRom(context)

源代码 · 使用指定的控制点和参数 alpha（默认值为 0.5）生成闭合的三次 Catmull-Rom 样条曲线，该参数由 Yuksel 等人提出。在 Catmull-Rom 曲线的参数化 中，对第一部分和最后一部分使用单侧差分。

¥Source · Produces a cubic Catmull–Rom spline using the specified control points and the parameter alpha, which defaults to 0.5, as proposed by Yuksel et al. in On the Parameterization of Catmull–Rom Curves, with one-sided differences used for the first and last piece.

curveCatmullRomClosed(context)

源代码 · 使用指定的控制点和参数 alpha（默认值为 0.5）生成闭合的三次 Catmull-Rom 样条曲线，该参数由 Yuksel 等人提出。当线段结束时，前三个控制点会重复，形成一个闭环。

¥Source · Produces a closed cubic Catmull–Rom spline using the specified control points and the parameter alpha, which defaults to 0.5, as proposed by Yuksel et al. When a line segment ends, the first three control points are repeated, producing a closed loop.

curveCatmullRomOpen(context)

源代码 · 使用指定的控制点和参数 alpha（默认值为 0.5）生成闭合的三次 Catmull-Rom 样条曲线，该参数由 Yuksel 等人提出。Unlike curveCatmullRom, one-sided differences are not used for the first and last piece, and thus the curve starts at the second point and ends at the penultimate point.

¥Source · Produces a cubic Catmull–Rom spline using the specified control points and the parameter alpha, which defaults to 0.5, as proposed by Yuksel et al. Unlike curveCatmullRom, one-sided differences are not used for the first and last piece, and thus the curve starts at the second point and ends at the penultimate point.

curveCatmullRom.alpha(alpha) {#curveCatmullRom_alpha}

Alpha:0.50

源代码 · 返回一个三次 Catmull-Rom 曲线，其指定的 alpha 值在 [0, 1] 范围内。如果 alpha 为零，则生成一条均匀样条曲线，相当于张力为零的 curveCardinal；如果 alpha 为 1，则生成弦样条曲线；如果 alpha 为 0.5，则生成 向心样条线。建议使用向心样条线以避免自相交和过冲。例如：

¥Source · Returns a cubic Catmull–Rom curve with the specified alpha in the range [0, 1]. If alpha is zero, produces a uniform spline, equivalent to curveCardinal with a tension of zero; if alpha is one, produces a chordal spline; if alpha is 0.5, produces a centripetal spline. Centripetal splines are recommended to avoid self-intersections and overshoot. For example:

const line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));

curveLinear(context)

源代码 · 生成一条通过指定点的折线。

¥Source · Produces a polyline through the specified points.

curveLinearClosed(context)

源代码 · 通过重复线段末尾的第一个点，生成通过指定点的闭合折线。

¥Source · Produces a closed polyline through the specified points by repeating the first point when the line segment ends.

curveMonotoneX(context)

源代码 · 生成一条三次样条曲线，其 保持单调性 在 y 方向上满足 保持单调性 函数，并假设 x 方向上满足单调性，正如 Steffen 在 一维单调插值的简单方法 中提出的那样：“一条具有连续一阶导数的平滑曲线，它穿过任何给定的数据点集而不会出现虚假振荡。”局部极值只能出现在数据给出的网格点上，而不会出现在两个相邻网格点之间。

¥Source · Produces a cubic spline that preserves monotonicity in y, assuming monotonicity in x, as proposed by Steffen in A simple method for monotonic interpolation in one dimension: “a smooth curve with continuous first-order derivatives that passes through any given set of data points without spurious oscillations. Local extrema can occur only at grid points where they are given by the data, but not in between two adjacent grid points.”

curveMonotoneY(context)

源代码 · 生成一条三次样条曲线，其 保持单调性 在 x 方向上满足 保持单调性 函数，并假设 y 方向上满足单调性，正如 Steffen 在 一维单调插值的简单方法 中提出的那样：“一条具有连续一阶导数的平滑曲线，它穿过任何给定的数据点集而不会出现虚假振荡。”局部极值只能出现在数据给出的网格点上，而不会出现在两个相邻网格点之间。

¥Source · Produces a cubic spline that preserves monotonicity in x, assuming monotonicity in y, as proposed by Steffen in A simple method for monotonic interpolation in one dimension: “a smooth curve with continuous first-order derivatives that passes through any given set of data points without spurious oscillations. Local extrema can occur only at grid points where they are given by the data, but not in between two adjacent grid points.”

curveNatural(context)

源代码 · 生成一个 natural 三次样条曲线，样条曲线的二阶导数在端点处设置为零。

¥Source · Produces a natural cubic spline with the second derivative of the spline set to zero at the endpoints.

curveStep(context)

源代码 · 生成一个由交替的水平和垂直线组成的分段常数函数 (阶跃函数)。y 值在每对相邻 x 值的中点处变化。

¥Source · Produces a piecewise constant function (a step function) consisting of alternating horizontal and vertical lines. The y-value changes at the midpoint of each pair of adjacent x-values.

curveStepAfter(context)

源代码 · 生成一个由交替的水平和垂直线组成的分段常数函数 (阶跃函数)。y 值在 x 值之后变化。

¥Source · Produces a piecewise constant function (a step function) consisting of alternating horizontal and vertical lines. The y-value changes after the x-value.

curveStepBefore(context)

源代码 · 生成一个由交替的水平和垂直线组成的分段常数函数 (阶跃函数)。y 值在 x 值之前变化。

¥Source · Produces a piecewise constant function (a step function) consisting of alternating horizontal and vertical lines. The y-value changes before the x-value.

自定义曲线

¥Custom curves

曲线通常不直接使用，而是传递给 line.curve 和 area.curve。但是，如果所有内置曲线都不能满足你的需求，你可以使用以下接口定义自己的曲线实现；请参阅 curveLinear 源 中的示例实现。你还可以将此低级接口与内置曲线类型结合使用，作为线和面积生成器的替代方案。

¥Curves are typically not used directly, instead being passed to line.curve and area.curve. However, you can define your own curve implementation should none of the built-in curves satisfy your needs using the following interface; see the curveLinear source for an example implementation. You can also use this low-level interface with a built-in curve type as an alternative to the line and area generators.

curve.areaStart() {#curve_areaStart}

表示新区域段的起点。每个区域段恰好由两个 线段 组成：顶线，后接基线，基线点按相反顺序排列。

¥Indicates the start of a new area segment. Each area segment consists of exactly two line segments: the topline, followed by the baseline, with the baseline points in reverse order.

curve.areaEnd() {#curve_areaEnd}

表示当前区域段的终点。

¥Indicates the end of the current area segment.

curve.lineStart() {#curve_lineStart}

表示新线段的起点。之后将有零个或多个 points 函数。

¥Indicates the start of a new line segment. Zero or more points will follow.

curve.lineEnd() {#curve_lineEnd}

表示当前线段的终点。

¥Indicates the end of the current line segment.

curve.point(x, y) {#curve_point}

表示当前线段中具有给定 x 和 y 值的新点。

¥Indicates a new point in the current line segment with the given x- and y-values.