正如我们对折线图所做的那样，通过将 curve（） 访问器函数链接到面积生成器，将区域的边界插值为曲线。这里我们也使用相同的曲线插值器函数， d3.curveCatmullRom 。
const areaGenerator = d3.area()
.x(d => xScale(d.date))
.y0(d => yScale(d.min_temp_F))
.y1(d => yScale(d.max_temp_F))
.curve(d3.curveCatmullRom);
一旦面积生成器准备就绪，我们需要做的就是将 SVG 路径元素附加到内部图表中。为了设置其 d 属性，我们调用区域生成器并将数据集作为参数传递。其余的纯粹与美学有关。我们将填充属性设置为之前声明的茄子色常数，并将填充不透明度设置为 20%，以确保区域和折线图之间的对比度足够。请注意，茄子常数的声明需要在我们使用它来设置区域的填充之前进行。
innerChart
.append("path")
.attr("d", areaGenerator(data))
.attr("fill", aubergine)
.attr("fill-opacity", 0.2);
图4.20 平均温度的折线图，结合显示最低温度和最高温度之间变化的区域。
如您所见，绘制区域的过程与绘制线条的过程非常相似。主要区别在于，一条线只有一组数据点，在这些数据点之间绘制了这条线，而区域是两条边之间的区域，每条边都有一组数据点。这就是为什么线发生器只需要两个访问器函数 x（） 和 y（） ，而面积生成器至少需要三个，在我们的例子中是 x（） 、y0（） 和 y1（）。
图 4.21 创建区域的步骤
我们现在有一张 2021 年纽约市平均温度的折线图，以及一个显示最低和最高温度之间变化的区域。它看起来已经相当不错了，但我们需要确保看到这张图表的人很容易理解线条和面积的含义。标签是一个很好的工具！
在 D3 中，标签只是我们放置在可视化效果上的 SVG 文本元素。在这里，我们将创建三个标签，一个用于我们将放置在折线图末尾的平均温度，一个用于放置在该区域下方的最低温度，另一个用于放置在该区域上方的最高温度。
让我们从折线图的标签开始。我们首先将 SVG 文本元素附加到内部图表，并使用 text（） 方法将其内容设置为“平均温度”。然后我们计算它的位置，由属性 x 和 y 控制。
我们希望标签位于折线图的末尾或紧靠其最后一个数据点之后。我们可以通过将之前声明刻度时计算的 lastDate 常量传递给 xScale（） 来获取该值。我们还添加了 10px 的额外填充。
对于垂直位置，我们还没有一个常数来为我们提供最后一个温度值。尽管如此，我们仍然可以使用 data[data.length - 1] 找到数据集中的最后一行，并使用点符号来访问平均温度。我们将这个值传递给 yScale（） 并获取标签的垂直位置。
最后，我们重用颜色常数茄子作为文本的颜色，由其填充属性控制。
innerChart
.append("text")
.text("Average temperature")
.attr("x", xScale(lastDate) 10)
.attr("y", yScale(data[data.length - 1].avg_temp_F))
.attr("fill", aubergine);
如果保存项目并在浏览器中查看，则会发现标签的底部与折线图上最后一个数据点的中心垂直对齐。默认情况下，SVG 文本的基线位于文本底部，如图 4.22 所示。我们可以使用主导基线属性来更改此设置。在下面的代码片段中，我们给此属性一个值 中间 ，以将基线移动到文本的垂直中心。
图 4.22 SVG 文本的 y 属性设置其基线的垂直位置，默认情况下位于文本底部。我们可以使用主导基线属性来更改它。如果我们给此属性值“middle”，则文本的基线将移动到其垂直中间，而值“hanging”会将基线移动到文本的顶部。
innerChart
.append("text")
.text("Average temperature")
.attr("x", xScale(lastDate) 10)
.attr("y", yScale(data[data.length - 1].avg_temp_F))
.attr("dominant-baseline", "middle")
.attr("fill", aubergine);
然后，我们将为该区域的下边界添加一个标签，该标签表示最低温度的演变。策略非常相似。我们首先附加一个 SVG 文本元素，并为其提供“最低温度”的内容。
对于它的位置，我们选择了最后一个向下的突起，它对应于倒数第三个数据点。我们将这些数据点的值传递给我们的秤以找到它的位置，并将标签向下移动 20px，向右移动 13px。这些数字是通过移动标签找到的，直到我们找到一个看起来合适的位置。浏览器的检查器工具是测试此类微小调整的好地方。请注意，我们已将标签的主要基线设置为 挂起 。如图 4.22 所示，这意味着 y 属性控制文本顶部的位置。
最后，在代码段中，您将看到我们在标签中添加了一条线，在该区域的向下突起和标签之间跟踪，以阐明标签代表的内容。您可以在图 4.23 中看到它的外观。同样，我们使用刻度来计算直线的 x1、y1、x2 和 y2 属性，这些属性控制其起点和终点的位置。
innerChart
.append("text")
.text("Minimum temperature")
.attr("x", xScale(data[data.length - 3].date) 13)
.attr("y", yScale(data[data.length - 3].min_temp_F) 20)
.attr("alignment-baseline", "hanging")
.attr("fill", aubergine);
innerChart
.append("line")
.attr("x1", xScale(data[data.length - 3].date))
.attr("y1", yScale(data[data.length - 3].min_temp_F) 3)
.attr("x2", xScale(data[data.length - 3].date) 10)
.attr("y2", yScale(data[data.length - 3].min_temp_F) 20)
.attr("stroke", aubergine)
.attr("stroke-width", 2);
我们使用非常相似的过程为该区域的上边界附加一个标签，该标签表示最高温度的演变。我们选择将此标签放置在与倒数第四个数据点相对应的向上突起附近。同样，我们在标签和突起之间画了一条线。完成后，折线图就完成了！
innerChart
.append("text")
.text("Maximum temperature")
.attr("x", xScale(data[data.length - 4].date) 13)
.attr("y", yScale(data[data.length - 4].max_temp_F) - 20)
.attr("fill", aubergine);
innerChart
.append("line")
.attr("x1", xScale(data[data.length - 4].date))
.attr("y1", yScale(data[data.length - 4].max_temp_F) - 3)
.attr("x2", xScale(data[data.length - 4].date) 10)
.attr("y2", yScale(data[data.length - 4].max_temp_F) - 20)
.attr("stroke", aubergine)
.attr("stroke-width", 2);
图 4.23 2021年纽约市温度演变的完整折线图。
