在最后一节中，我们将讨论如何使用 D3 绘制弧线。弧形是数据可视化中的常见形状。它们用于饼图、旭日图和南丁格尔图，以可视化金额与总数的关系，我们经常在自定义径向可视化中使用它们。
像直线和面积一样，弧是用 SVG 路径绘制的，而且，正如你现在可能已经猜到的那样，D3 提供了一个方便的弧发生器函数，可以为我们计算弧路径的 d 属性。
在详细讨论电弧发生器之前，让我们准备我们的项目。在这里，我们将绘制构成径向图的弧线，您可以在图 4.1 中的“有降水的日子”或托管项目 （https://d3js-in-action-third-edition.github.io/new-york-city-weather-2021/） 中看到。蓝色弧线表示 2021 年纽约市有降水的天数百分比 （35%），而灰色弧线表示其余天数。
首先，打开文件弧.js .这就是我们将在本章其余部分工作的地方。像往常一样，我们需要加载一个数据集，在本例中为 daily_precipitations.csv ，它包含在数据文件夹中。如果您查看 CSV 文件，您会发现它只包含两列：日期列列出了 2021 年的每一天，而total_precip_in列则提供了每天的总降水量（以英寸为单位）。
在下面的代码片段中，我们使用 d3.csv（） 获取数据集，使用 d3.autoType 正确格式化日期和数字，并使用 Promise 将其链接，我们将数据记录到控制台中。我们不会在这里讨论如何使用 d3.csv（） 的细节。有关更多说明，请参阅第 3 章，有关 d4.autoType 的讨论，请参阅本章的第 1.3 节。
d3.csv("./data/daily_precipitations.csv", d3.autoType).then(data => {
console.log("precipitations data", data);
});
如果您在控制台中查看数据，您会发现日期和数字的格式都正确。伟大！我们可以获取格式化的数据集并将其传递给函数 drawArc（） ，它已经存在于 arcs 中.js .
d3.csv("./data/daily_precipitations.csv", d3.autoType).then(data => {
console.log("precipitations data", data);
drawArc(data);
});
在 drawArc（） 中，我们现在可以附加一个新的 SVG 容器。正如您在以下代码片段中看到的，我们为 SVG 容器提供了 300px 的宽度和高度，并将其附加到 div 中，其中包含索引中已经存在的 arc id.html 。我们使用第 1 章中解释的策略使 SVG 响应：将 viewBox 属性的最后两个值设置为其宽度和高度，并完全省略宽度和高度属性。这样，SVG 容器将适应其父容器的大小，同时保留其纵横比。请注意，我们将 SVG 容器选择保存在名为 svg 的常量中。
const pieChartWidth = 300;
const pieChartHeight = 300;
const svg = d3.select("#arc")
.append("svg")
.attr("viewBox", [0, 0, pieChartWidth, pieChartHeight]);4.4.1 极坐标系
如第 4.1 节所述，我们将图表包装在 SVG 组中，并将该组转换为所需位置。不过，这次的策略有点不同。我们不需要为轴或标签保留空间，因此我们可以省略边距约定。但是，与迄今为止构建的所有可视化相反，弧位于极坐标系中，而不是笛卡尔坐标系中，后者的行为略有不同。
如图 4.24 所示，SVG 容器的坐标系是笛卡尔坐标系。它使用两个垂直维度 x 和 y 来描述 2D 空间中的位置。我们在第 1 章中讨论过，SVG 元素的坐标系有点特殊，因为它的原点位于 SVG 容器的左上角，使 y 维在从上到下的方向上为正。
2D 极坐标系还使用两个维度：半径和角度。半径是原点与空间中点之间的距离，而角度是从 12 点钟方向沿顺时针方向计算的。这种描述空间位置的方法在处理圆弧时特别有用。
图 4.24 笛卡尔坐标的尺寸彼此垂直，而极坐标系统使用半径和角度尺寸来描述空间中的位置。
由于元素位于极坐标系中的原点周围，因此我们可以说我们将要构建的弧可视化的原点位于 SVG 容器的中心，如图 4.25 所示。
图 4.25 通过将弧包装成 SVG 组并将该组转换为 SVG 容器的中心，我们简化了一组弧的创建。当我们向组追加弧时，它们的位置将自动相对于图表的中心，这对应于其极坐标系的原点。
在下一个代码片段中，我们选择SVG容器并在其中附加一个组，我们将该组转换为SVG容器的中心，并将其保存在常量innerChart中。
const innerChart = svg
.append("g")
.attr("transform", `translate(${pieChartWidth/2},
➥ ${pieChartHeight/2})`);
在创建弧线之前，我们需要做最后一件事：计算图表上有降水的日子所采用的角度。使用 D3 创建饼图或圆环图时，我们通常使用饼图布局生成器处理此类计算，我们将在下一章中介绍。但是由于我们在这里只画两个弧线，所以数学很容易。
首先，我们可以使用数据集的 length 属性知道 2021 年的总天数，即 365。然后，我们通过过滤数据集来查找有降水的天数，以仅保留降水量大于零的天数，即 126 天。最后，我们将降水的天数除以总天数（得到 35%），将降水天数转换为百分比。
const numberOfDays = data.length;
const numberOfDaysWithPrecipitations = data.filter(d =>
➥ d.total_precip_in > 0).length;
const percentageDaysWithPrecipitations =
➥ Math.round(numberOfDaysWithPrecipitations / numberOfDays * 100);
然后，我们可以通过将这个数字乘以 360 度（一个完整圆的度数）来计算对应于降水天数的角度，得到 126 度。我们从度开始，因为它往往更直观，但我们还需要将此值转换为弧度。为此，我们将降水天数百分比（以度为单位）所覆盖的角度乘以数字 pi （3.1416），然后将其除以 180，得到大约 2.2 弧度的角度，我们将其保存在常数angleDaysWithPrecipitations_rad中。
我们执行此转换是因为我们将在一会儿使用的电弧发生器期望角度以弧度而不是度为单位。作为处理角度的经验法则，JavaScript 通常希望它们以弧度为单位，而 CSS 使用度数。
const angleDaysWithPrecipitations_deg = percentageDaysWithPrecipitations *
➥ 360 / 100;
const angleDaysWithPrecipitations_rad = angleDaysWithPrecipitations_deg *
➥ Math.PI / 180;4.4.2 使用电弧发生器
我们终于到了有趣的部分，生成弧线！首先，我们需要声明一个电弧发生器，就像我们对线和区域所做的那样。弧发生器 d3.arc（） 是模块 d3-shape （https://github.com/d3/d3-shape） 的一部分，在我们的例子中，需要两个主要的访问器函数：弧的内半径和外半径，分别由 innerRadius（） 和 outerRadius（） 处理，并给定值为 80 和 120px。请注意，如果内半径为零，我们会得到一个类似于饼图中的弧线，并从原点开始。
const arcGenerator = d3.arc()
.innerRadius(80)
.outerRadius(120);
我们可以通过使用访问器函数在弧形之间添加填充来个性化我们的弧线 padAngle（） ，它接受以弧度为单位的角度。这里我们使用 0.02 弧度，对应于略多于 1 度。我们也可以用 角半径（） ，它接受一个以像素为单位的值。此访问器函数与 CSS 边框半径属性具有类似的效果。
const arcGenerator = d3.arc()
.innerRadius(80)
.outerRadius(120)
.padAngle(0.02)
.cornerRadius(6);
图 4.26 电弧发生器使用多个访问器函数来计算电弧的 d 属性。在这里，我们在生成器声明期间设置其内半径、外半径、填充角度和角半径。我们将在将路径元素附加到图表时传递每个弧的开始和结束角度。
此时，您可能想知道为什么我们不使用处理弧线覆盖的角度的访问器函数。在我们的例子中，由于我们已经手动计算了角度，因此当我们附加路径时，将这些值传递给电弧发生器会更简单。但我们将在下一章中看到，情况并非总是如此。
因此，让我们附加第一个弧线，即显示降水天数的弧线。在下面的代码片段中，我们首先将一个 path 元素附加到内部图表选择中。然后，我们通过调用最后一个代码段中声明的 arc 生成器来设置其 d 属性。
观察我们如何将开始和结束角度作为对象传递给生成器。起始角度的值为零，对应于 12 点钟位置，而结束角度的值是之前计算的降水天数所覆盖的角度。最后，我们将弧线的填充设置为颜色 #6EB7C2，青蓝色。
innerChart
.append("path")
.attr("d", () => {
return arcGenerator({
startAngle: 0,
endAngle: angleDaysWithPrecipitations_rad
});
})
.attr("fill", "#6EB7C2");
我们以类似的方式附加第二个弧线。这一次，弧从前一个弧线结束的地方开始，到圆圈完成时结束，对应于弧度中的角度 2*Pi。我们给弧线一个 #DCE2E2，一种更接近灰色的颜色，以表明这些日子没有降水。
innerChart
.append("path")
.attr("d", () => {
return arcGenerator({
startAngle: angleDaysWithPrecipitations_rad,
endAngle: 2 * Math.PI
});
})
.attr("fill", "#DCE2E2");
保存项目后，弧应如图 4.27 所示。我们鼓励您使用传递给生成器的访问器函数的值（如半径或角半径），以了解它们如何修改弧的外观。
图 4.27 弧线显示有降水天数和无降水天数之间的比率。
