如您所见，绘制圆弧的过程类似于绘制线条和区域的过程。主要区别在于弧在空间中的位置是用极坐标而不是笛卡尔来处理的，这反映在弧发生器的访问器函数中。
图 4.28 绘制弧线的步骤。
饼图和圆环图最近在数据可视化社区中得到了很多负面报道，主要是因为我们意识到人眼不太擅长估计弧线所代表的比率。但是，这些图表并不总是一个糟糕的选择，尤其是当它们包含少量类别时。但我们绝对可以通过标签帮助他们提高可读性，这就是我们在这里要做的！
在表示有降水天数的弧线上，我们将添加标签“35%”，即之前计算的有降水的天数百分比。放置此标签的好地方是弧的质心，也称为其质心。此值可由电弧发生器提供。
在下面的代码片段中，我们在前面初始化的弧发生器函数上调用方法。这一次，我们将它与 startAngle（） 和 endAngle（） 访问器函数链接起来，分别将它们传递代表有降水的日子的弧的开始角和结束角的值。最后，我们链接方法centroid（），它将计算弧的中点。
const centroid = arcGenerator
.startAngle(0)
.endAngle(angleDaysWithPrecipitations_rad)
.centroid();
将质心记录到控制台中。您将看到它由两个值的数组组成：质心的水平和垂直位置，在我们的例子中是 [89， -45] ，从内部图表的原点计算得出。
在下一个代码段中，我们通过向内部图表追加文本元素来创建标签。为了使标签包含“%”符号，我们使用方法 d3.format（“.0%”） ，后跟括号中的值。此方法便于以特定方式（如货币、百分比和指数）格式化数字，或为这些数字添加特定后缀，如“M”表示百万或“μ”表示微型。您可以在模块 d3 格式 （https://github.com/d3/d3-format） 中找到所有可用格式的详细列表。
然后，我们使用质心数组中返回的第一个和第二个值设置 x 和 y 属性。请注意我们如何设置文本锚点和主要基线属性，以确保标签在水平和垂直方向上以 x 和 y 属性为中心。
最后，我们给标签一个白色和500的字体粗细，以提高其易读性。保存后，带有标签的弧应如图 4.29 所示。
innerChart
.append("text")
.text(d => d3.format(".0%")(percentageDaysWithPrecipitations/100))
.attr("x", centroid[0])
.attr("y", centroid[1])
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", "white")
.style("font-weight", 500);
图 4.29 带有标签的已完成弧。
您现在知道如何使用 D3 绘制线条、面积和弧线了！在下一章中，我们将使用布局生成器将这些形状提升到另一个层次。
4.5 小结- D3 边距约定的作用是以系统和可重用的方式为轴、标签和图例保留图表周围的空间。
- 我们通过声明一个包含上边距、右边距、下边距和左边距值的边距对象来实现这一点。
- 一个有用的策略是将构成图表本身的元素包装到 SVG 组中，并根据边距将此组放置在 SVG 容器中。这将为图表元素创建一个新的原点，并促进其实现。
- D3 有四个轴生成器：axisTop（）、axisRight（）、axisBottom（） 和 axisLeft（） ，它们分别创建顶部、右侧、底部和左侧轴的组件。
- 这些轴生成器将刻度作为输入，并返回组成轴的 SVG 元素作为输出（沿轴的一条线以及多组刻度和标签）。
- 通过将 call（） 方法链接到选择并将轴作为参数传递，我们将轴附加到图表。
- 折线图是最常见的图表之一，可用于显示现象随时间推移的演变。我们绘制带有连接数据点的线条或曲线的折线图。为了绘制折线图，我们首先使用 d3.line（） 方法初始化一个线生成器。线生成器有两个访问器函数，x（） 和 y（），它们计算每个数据点的水平和垂直位置。我们可以使用 curve（） 访问器函数将折线图转换为曲线。D3提供多种曲线插值函数，这些函数会影响数据表示，必须仔细选择。为了使折线图显示在屏幕上，我们将路径元素附加到选择中，并通过调用线生成器并将数据集作为属性传递来设置其 d 属性。
- 面积是两个边界之间的区域，使用 D3 绘制区域类似于绘制一条线。为了绘制一个区域，我们首先用方法 d3.area（） 声明一个区域生成器。此方法至少需要三个访问器函数来计算每个数据点沿区域边缘的位置，例如 x（） 、y0（） 和 y1（） 或 x0（）、x1（） 和 y（）。与直线一样，D3 提供了可与 curve（） 访问器函数一起应用的插值函数。为了使区域出现在屏幕上，我们将路径元素附加到选择中，并通过调用区域生成器并将数据集作为属性传递来设置其 d 属性。
- 标签对于帮助读者理解我们的数据可视化特别有用。在 D3 中，标签只是我们需要在 SVG 容器中定位的文本元素。SVG 文本的位置由其 x 和 y 属性控制。y 属性设置文本基线的位置，默认情况下，基线位于其底部。我们使用属性移动 SVG 文本的基线 主导基线 .值中间将基线移动到文本的垂直中间，而值挂起 将基线移动到顶部。
- 使用弧的可视化通常使用极坐标系进行描述。此坐标系使用半径、原点与点之间的距离以及角度来描述空间中的位置。
- 弧是使用 SVG 路径元素创建的，其中 d 属性是使用弧发生器计算的。D3 的弧发生器 d3.arc（） 具有访问函数，用于定义弧的起始和结束角度（ startAngle（） 和 endAngle（） ），以及它的内半径和外半径（ innerRadius（） 和 outerRadius（） ）。我们还可以使用访问器函数来圆弧的角（ cornerRadius（） ） 或在弧之间添加填充 （ padAngle（） ）。电弧发生器期望角度以弧度表示。
- 弧的质心可以用 centroid（） 方法计算。此访问器函数链接到电弧发生器，返回一个包含质心水平和垂直位置的数组。
