Learn|Learn D3 入门文档（Shapes） LearnD3入门文档：Shapes

引子继 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 来得到与区域基线或顶线对应的线条。这对于使用顶部或底部线条装饰区域非常有用。

文章图片

【Learn|Learn D3 入门文档（Shapes）】线条和区域有更多功能，我们不会在这里全部介绍，但有几个提示：径向线条和区域对于周期性数据很有用，比如季节性温度；曲线提供可配置的插值方法，例如维持单一性的曲线；你可以显示缺失数据的间隙。
当然，可视化不仅仅是条形、线和区域。
另一种常见的形状 D3 称之为弧形（arc），但数学家称之为环形扇形。它的特性应用在 pie charts、 donut charts、 sunbursts （但令人困惑的是，不是 arc diagrams）。