在像我们的折线图这样的情况下，离散数据点覆盖了整个数据范围，用简单的线条表示数据点是一个很好的解决方案。但有时，我们需要在点之间插值数据，为此 D3 提供了各种生成曲线的插值函数。
曲线生成器用作 d3.line（） 的访问函数。要将上一节中声明的线生成器转换为曲线生成器，我们只需链接 curve（） 访问器函数并传递 D3 的一个插值器。在下面的代码片段中，我们使用插值器 d3.curveCatmullRom ，它产生一个三次样条曲线（通过每个数据点并使用三阶多项式函数计算的平滑灵活的形状）。结果如图4.16所示。
const curveGenerator = d3.line()
.x(d => xScale(d.year))
.y(d => yScale(d.electoral_democracies))
.curve(d3.curveCatmullRom);
图 4.16 使用Catmull-Roll样条进行曲线插值的折线图。
插值会修改数据表示，不同的插值函数会创建不同的可视化效果。数据可以通过各种方式可视化，从编程的角度来看，所有这些都是正确的。但是，我们有责任确保我们可视化的信息反映了实际现象。
由于数据可视化处理统计原理的可视化表示，因此它受到滥用统计数据的所有危险的影响。线条的插值特别容易被误用，因为它将一条看起来笨拙的线条变成了一条平滑的“自然”线条。
在图 4.17 中，您可以看到使用不同曲线插值跟踪的相同折线图，并了解它们如何影响视觉表示。选择适当的插值函数在很大程度上取决于您正在使用的数据。在我们的例子中，d3.curveBasis低估了温度的突然变化，而d3.curveBundle旨在拉直曲线并减少其变化，这对于我们的数据来说是不够的。如果我们没有在图表上绘制数据点，我们就不知道曲线不能准确地表示它们。这就是为什么仔细选择和测试曲线插值函数很重要的原因。
另一方面，函数 d3.curveMonotoneX 和 d3.curveCatmullRom 创建紧随数据点的曲线，类似于原始折线图。d3.curveStep 还可以在上下文适当时提供对数据的有趣解释。图 4.17 中所示的曲线插值列表并不详尽，其中一些插值器还接受影响最终曲线形状的参数。有关所有可用选项，请参阅 d3 形状模块 （https://github.com/d3/d3-shape）。
图 4.17 不同的曲线插值及其如何修改数据的表示。
您现在知道如何使用 D3 绘制折线图了！回顾一下，我们首先需要初始化一个线生成器函数并设置其 x（） 和 y（） 访问器函数。这些将负责计算每个数据点的水平和垂直位置。然后，我们可以通过链接 curve（） 访问器函数并选择插值来选择将直线转换为曲线。最后，我们将一个 SVG 路径元素附加到我们的图表中，并通过调用线条生成器并将数据作为参数传递来设置其 d 属性。在第 7 章中，我们将通过工具提示使此折线图具有交互性。如果您想立即学习该章节，请随时直接转到该章节！
图 4.18 创建折线图的步骤
在本节中，我们将在折线图后面添加一个区域，以显示每个日期的最低和最高温度之间的范围。在 D3 中绘制区域的过程与用于绘制线条的过程非常相似。像线条一样，区域是使用 SVG 路径元素创建的，D3 为我们提供了一个方便的区域生成器函数， d3.area（） ，用于计算该路径的 d 属性。
在开始之前需要注意的一件事是，我们希望显示折线图后面的区域。由于元素在屏幕上的绘制顺序与它们追加在 SVG 父项中的顺序相同，因此应在创建折线图的代码之前添加用于绘制区域的代码。
4.3.1 使用面积生成器让我们首先声明一个区域生成器函数，并将其存储在名为 areaGenerator 的常量中。正如您在以下代码片段中观察到的那样，区域生成器至少需要三个访问器函数。第一个 x（） 负责计算数据点的水平位置，与线生成器完全相同。但是现在，我们不仅有一组数据点，而是两组：一个沿着区域的下边缘，另一个在其上边缘，因此访问器函数 y0（） 和 y1（） 。请注意，在我们的例子中，区域下边缘和上边缘的数据点共享相同的水平位置。
const areaGenerator = d3.area()
.x(d => xScale(d.date))
.y0(d => yScale(d.min_temp_F))
.y1(d => yScale(d.max_temp_F));
图 4.19 可能有助于可视化区域的下限和上限，以及面积生成器如何计算与该区域相关的数据。
图 4.19 面积生成器 d3.area（） 与三个或更多访问器函数结合使用。为了绘制最低和最高温度之间的面积，我们使用 x（）、y0（） 和 y1（）。第一个计算每个数据点的水平位置，第二个计算数据点在下边界上的垂直位置，这里是最低温度，第三个是数据点在上边缘的垂直位置，这里是最高温度。
