共计 1777 个字符，预计需要花费 5 分钟才能阅读完成。
引子
继 Learn D3: Scales 第五篇，只是英文翻译，可批改代码的局部用动态图片代替了，想要实时交互请浏览原文。
- 原文：Learn D3: Shapes
- 版本：Published Mar 24, 2020
- Origin
- My GitHub
注释
SVG 和 Canvas 容许任何类型的图形是无意通用的；相比之下，D3 用于可视化，因而提供了专门的 形态 词汇，这些形态是生成门路数据的函数。
门路能够画圆、矩形、直线、曲线、俯冲动作、老虎🐅，还有你能设想到的任何事件。门路的形态由 SVG 门路数据语言（或等效的 Canvas 门路办法）指定，这相似于老式绘图笔的命令。例如：
- Mx,y – 挪动到指定点 [x,y]
- Lx,y – 画一条线到指定点 [x,y]
- hx – 画一条长为 x 的水平线
- vy – 画一条长为 y 的垂直线
- z – 敞开以后子门路
比如说，咱们想把几年来苹果的股价设想成一个折线图。这是一个蕴含 date 和 close 的数据集（“close”指市场开盘时的股票价格），以及相应的比例尺。
为了画这条线，咱们须要门路数据，用 Mx,y 开始挪动到第一个点，而后反复 Lx,y 来画一条到每个后续点的线。咱们能够通过循环各点来实现这一点。
然而 d3.line 更不便。调用 d3.line 将返回一个默认的线生成器，通过调用 line.x 和 line.y，咱们能够应用函数配置该线，以返回给定数据点 d 的 x 和 y 地位。这些函数检索所需的形象值（date 或 count），并将其转换为可视地位（通过利用比例）。
通过线生成器，数据返回相应的 SVG 门路数据字符串，该字符串可用于设置门路元素的 d 属性。
（为了防止反复，我在上面的附录中定义了可重用轴。每个轴都是一个函数，用于抉择 G 元素进行填充。）
下面的门路采纳蓝色线条，没有填充。为了防止线段之间的斜接造成误导性尖峰，我将斜接限度设置为线条宽度的 100%（1×）。我也能够应用圆角线连贯和封口。
对于区域图，也有相似的 d3.area。区域的形态指定为具备共享 x 值的两条线：area.y0 为基线，area.y1 为顶线。对于沿图表底部边缘具备恒定基线的区域图，咱们将 area.y0 设置为 y(0)。
如果你想要一个具备可变基线的区域，如 stacked area chart，streamgraph 或上面的 Bollinger bands，给 area.y0 传递一个函数就能够了。与 area.x 和 area.y1 一样，将为每个数据点调用此函数以计算相应的 y 值。
为了通过显示核心挪动平均线和每日收盘价来实现 Bollinger bands 的展现，咱们能够在顶部叠加线。因为每个门路元素只能有一个款式，所以咱们对多个门路应用多种色彩。
线条和区域协同工作时：能够通过别离调用 area.lineY0 或 area.lineY1 来失去与区域基线或顶线对应的线条。这对于应用顶部或底部线条装璜区域十分有用。
线条和区域有更多功能，咱们不会在这里全副介绍，但有几个提醒：径向线条和区域对于周期性数据很有用，比方季节性温度；曲线提供可配置的插值办法，例如维持单一性的曲线；你能够显示缺失数据的间隙。
当然，可视化不仅仅是条形、线和区域。
另一种常见的形态 D3 称之为 弧形（arc），但数学家称之为环形扇形。它的个性利用在 pie charts、donut charts、sunbursts（但令人困惑的是，不是 arc diagrams）。
与直线和区域由 x 和 y 配置的形式相似，弧形由 innerRadius，outerRadius，startAngle，endAngle（角度以弧度示意）配置。下面的弧形生成器配置为承受一个数组 [startAngle，endAngle]。
对于 pie 图表或 donut 图表来说，如上所述计算弧角可能很繁琐，因而 D3 为了方便使用提供了 d3.pie。回忆一下美味的水果数据集。
为 pie 布局的 count 属性配置 value 拜访器，咱们能够计算弧角，从而使每个弧的角度跨度与其值成比例，并且弧的总跨度从 0 到 2π 间断递增。
这些每个数据的对象，能够传递到具备固定半径的弧形生成器，以生成圆环图(因为我忍不住想夸耀一下，所以我会应用填充和圆角半径。）
当初咱们曾经介绍了一些常见的数据图形，让咱们看看如何让它们动起来！
Next
附录
附
依据源码，去除了平台依赖，提取了次要代码，有以下示例：
- 示例 1
- 示例 2
- 示例 3
- 示例 4
- 示例 5
- 示例 6
- 示例 7
参考资料
- Learn D3: Shapes
