现在，我们已准备好构建最常见的数据可视化之一：折线图。折线图由连接数据点的线或插入这些数据点的曲线组成。它们通常用于显示现象随时间推移的演变。在 D3 中，这些直线和曲线是使用 SVG 路径元素构建的，这些元素的形状由其 d 属性确定。在第 1 章中，我们讨论了 d 属性是如何由一系列命令组成的，这些命令指示如何绘制形状。我们还说过，它很快就会变得复杂。值得庆幸的是，d3 形状模块 （https://github.com/d3/d3-shape） 提供了为我们计算 d 属性的线和曲线生成器函数，简化了折线图的创建。
在本节中，我们将绘制一条线/曲线，显示 2021 年纽约市平均温度的演变，就像您在托管项目 （https://d3js-in-action-third-edition.github.io/new-york-city-weather-2021/） 或图 4.1 中看到的那样。但首先，让我们在屏幕上显示每个数据点。虽然这一步对于绘制折线图不是必需的，但它将帮助我们了解 D3 的线生成器函数的工作原理。
在函数 drawLineChart（） 中工作，我们使用数据绑定模式为数据集weekly_temperature.csv中的每一行创建一个圆圈。我们将这些圆圈附加到 innerChart 选择中，并给它们一个 4px 的半径。然后我们使用x和y尺度计算它们的位置属性（cx和cy）。
如果你还记得我们从第 3 章开始关于数据绑定的讨论，你就知道我们可以使用访问器函数访问绑定到每个圆圈的数据。在下面的代码片段中，d 公开了附加到每个圆的基准面。这些数据是一个 JavaScript 对象，我们可以使用点符号访问日期或平均温度。如果您需要查看此概念，请参阅第 3.3.1 节。
请注意我们如何声明一个名为“茄子”的单独颜色常量，并使用它来设置圆圈的填充属性。在这个项目中，我们将重复使用相同的颜色几次，因此将其放在常量中会很方便。随意使用您喜欢的任何颜色！
const aubergine = "#75485E";
innerChart
.selectAll("circle") #A
.data(data) #A
.join("circle") #A
.attr("r", 4)
.attr("cx", d => xScale(d.date)) #B
.attr("cy", d => yScale(d.avg_temp_F)) #B
.attr("fill", aubergine);
保存您的项目并查看浏览器中的圆圈。它们应位于 29 到 80°F 之间，并形成圆顶状形状，如图 4.13 所示。
图 4.13 平均温度随时间演变的数据点。
在这个阶段要指出的一件很酷的事情是，即使没有注意到它，你现在也知道如何绘制散点图！散点图只是一个图表，显示沿 x 轴和 y 轴定位的数据点集合，并可视化两个或多个变量之间的关系。
您知道如何绘制轴，并且知道如何根据其相关数据在屏幕上定位数据点，因此您可以完全构建散点图！这就是D3的酷之处。您不必学习如何创建特定的图表。相反，您可以通过生成和组装构建基块来构建可视化效果。对于散点图，这些构建基块可以像两个轴和一组圆一样简单。在第 7 章中，我们将构建一个散点图，其中圆的面积根据变量而变化。
散点图示例
现在我们清楚地看到了每个数据点的位置，引入 D3 的线生成器会更容易。行生成器 d3.line（） 是一个函数，它将每个数据点的水平和垂直位置作为输入，并返回线或折线的 d 属性，作为输出传递通过这些数据点。我们通常用两个访问函数 x（） 和 y（） 链接线生成器，分别将数据点的水平和垂直位置作为参数，如图 4.14 所示。
图 4.14 行生成器 d3.line（） 与两个访问器函数 x（） 和 y（） 结合使用，它们分别将每个数据点的水平和垂直位置作为参数。
让我们为折线图声明一个线生成器函数。我们首先调用方法 d3.line（） 并使用 x（） 和 y（） 访问器函数进行链接。x（） 访问器函数将每个数据点的水平位置作为参数。如果我们像到目前为止所做的那样遍历数据，我们可以使用参数 d 来访问每个基准面（数据集的每一行）。数据点的水平位置对应于它们表示的日期，并使用 xScale（） 计算。同样，数据点的垂直位置与当天的平均温度成正比，并由 yScale（） 返回。我们将行生成器函数存储在名为 lineGenerator 的常量中，以便稍后可以调用它。
const lineGenerator = d3.line()
.x(d => xScale(d.date)) #A
.y(d => yScale(d.avg_temp_F)); #B
然后，我们将一个路径元素附加到内部图表，并通过调用线生成器并将数据集作为参数传递来设置其 d 属性。
默认情况下，SVG 路径具有黑色填充。如果我们只想看到一条线，我们需要将填充属性设置为 none 并将笔触属性设置为我们选择的颜色;这里，颜色存储在茄子常数中。此笔画将成为我们的折线图，如图 4.15 所示。
innerChart
.append("path")
.attr("d", lineGenerator(data)) #A
.attr("fill", "none")
.attr("stroke", aubergine);
图 4.15 使用线生成器创建并穿过每个数据点的 SVG 路径，生成折线图。
