跳到内容

曲线

曲线将 直线区域 的离散(逐点)表示转换为连续形状:曲线指定如何在二维 [x, y] 点之间进行插值。

曲线通常不会直接构建或使用。相反,内置曲线之一被传递给 line.curvearea.curve

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

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

curveBasis(context)

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

curveBasisClosed(context)

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

curveBasisOpen(context)

来源 · 使用指定的控制点生成三次 基函数样条。与 basis 不同的是,第一个和最后一个点没有重复,因此曲线通常不会与这些点相交。

curveBumpX(context)

来源 · 在每对点之间生成贝塞尔曲线,在每个点处具有水平切线。

curveBumpY(context)

来源 · 在每对点之间生成贝塞尔曲线,在每个点处具有垂直切线。

curveBundle(context)

来源 · 使用指定的控制点生成直线化的三次 基函数样条,样条曲线根据曲线的 beta 进行直线化,默认值为 0.85。此曲线通常用于 层次边捆绑 以消除连接的歧义,正如 Danny Holten分层边捆绑:分层数据中邻接关系的可视化 中所提出的。此曲线没有实现 curve.areaStartcurve.areaEnd;它旨在与 d3.line 结合使用,而不是 d3.area

curveBundle.beta(beta)

来源 · 返回一个具有指定 beta 的捆绑曲线,beta 在 [0, 1] 范围内,表示捆绑强度。如果 beta 等于零,则生成第一个点和最后一个点之间的直线;如果 beta 等于一,则生成标准 basis 样条曲线。例如

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

curveCardinal(context)

来源 · 使用指定的控制点生成三次 基函数样条,对第一个和最后一个部分使用单边差分。默认 tension 为 0。

curveCardinalClosed(context)

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

curveCardinalOpen(context)

来源 · 使用指定的控制点生成三次 基函数样条。与 curveCardinal 不同的是,对第一个和最后一个部分不使用单边差分,因此曲线从第二个点开始,到倒数第二个点结束。默认 tension 为 0。

curveCardinal.tension(tension)

来源 · 返回一个具有指定 tension 的基函数曲线,tension 在 [0, 1] 范围内。tension 决定了切线的长度:tension 为一将产生所有零切线,等效于 curveLineartension 为零将生成均匀的 Catmull–Rom 样条曲线。例如

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

curveCatmullRom(context)

来源 · 使用指定的控制点和参数 alpha 生成三次 Catmull–Rom 样条曲线,默认值为 0.5,正如 Yuksel 等人在 Catmull–Rom 曲线的参数化 中所提出的,对第一个和最后一个部分使用单边差分。

curveCatmullRomClosed(context)

来源 · 使用指定的控制点和参数 alpha 生成闭合三次 Catmull–Rom 样条曲线,默认值为 0.5,正如 Yuksel 等人所提出的。当线段结束时,前三个控制点被重复,生成一个闭合循环。

curveCatmullRomOpen(context)

来源 · 使用指定的控制点和参数 alpha 生成三次 Catmull–Rom 样条曲线,默认值为 0.5,正如 Yuksel 等人所提出的。与 curveCatmullRom 不同的是,对第一个和最后一个部分不使用单边差分,因此曲线从第二个点开始,到倒数第二个点结束。

curveCatmullRom.alpha(alpha)

源代码 · 返回一个三次 Catmull-Rom 曲线,其指定 *alpha* 值在 [0, 1] 范围内。如果 *alpha* 为零,则生成均匀样条曲线,等效于 curveCardinal 张力为零;如果 *alpha* 为一,则生成弦样条曲线;如果 *alpha* 为 0.5,则生成 向心样条曲线。建议使用向心样条曲线来避免自交和过度伸展。例如

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

curveLinear(context)

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

curveLinearClosed(context)

源代码 · 通过指定点生成闭合折线,在折线段结束时重复第一个点。

curveMonotoneX(context)

源代码 · 生成三次样条曲线,该曲线 保持 *y* 中的单调性,假设在 *x* 中保持单调性,如 Steffen 在 一维单调插值的一种简单方法 中提出的:“一条具有连续一阶导数的平滑曲线,穿过任意给定的数据点集,且不会产生虚假振荡。局部极值只能出现在数据给出的网格点上,而不能出现在两个相邻网格点之间。”

curveMonotoneY(context)

源代码 · 生成三次样条曲线,该曲线 保持 *x* 中的单调性,假设在 *y* 中保持单调性,如 Steffen 在 一维单调插值的一种简单方法 中提出的:“一条具有连续一阶导数的平滑曲线,穿过任意给定的数据点集,且不会产生虚假振荡。局部极值只能出现在数据给出的网格点上,而不能出现在两个相邻网格点之间。”

curveNatural(context)

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

curveStep(context)

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

curveStepAfter(context)

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

curveStepBefore(context)

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

自定义曲线

曲线通常不直接使用,而是传递给 line.curvearea.curve。但是,如果内置曲线无法满足您的需求,您可以使用以下接口定义自己的曲线实现;请参阅 curveLinear 源代码 了解示例实现。您也可以将此低级接口与内置曲线类型一起使用,作为线和区域生成器的替代方案。

curve.areaStart()

表示一个新的区域段的开始。每个区域段正好包含两个 线段:顶线,然后是底线,底线点按相反顺序排列。

curve.areaEnd()

表示当前区域段的结束。

curve.lineStart()

表示一个新的线段的开始。将跟随零个或多个

curve.lineEnd()

表示当前线段的结束。

curve.point(x, y)

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