d3-shape

可视化可以由离散的图形标记表示，例如 符号、弧形、线条 和 区域。虽然条形图的矩形有时可能很简单，但其他形状则很复杂，例如圆形环形扇区和 Catmull–Rom 样条曲线。d3-shape 模块提供各种形状生成器以方便您使用。

与 D3 的其他方面一样，这些形状由数据驱动：每个形状生成器都公开访问器，这些访问器控制如何将输入数据映射到可视表示。例如，您可以通过 缩放 数据字段以适应图表来为时间序列定义一个线条生成器

const line = d3.line()
    .x((d) => x(d.date))
    .y((d) => y(d.value));

然后可以使用此线条生成器计算 SVG 路径元素的 d 属性

path.datum(data).attr("d", line);

或者，您可以使用它渲染到 Canvas 2D 上下文

line.context(context)(data);

请参阅以下内容之一

• 弧形 - 圆形或环形扇区，例如饼图或环形图。
• 区域 - 由边界顶线和底线定义的区域，例如面积图。
• 曲线 - 在点之间插值以产生连续的形状。
• 线条 - 样条曲线或折线，例如折线图。
• 链接 - 从源到目标的平滑三次贝塞尔曲线。
• 饼图 - 计算饼图或环形图的角度。
• 堆叠 - 堆叠相邻形状，例如堆叠条形图。
• 符号 - 分类形状编码，例如散点图。
• 径向区域 - 与 区域 相似，但位于极坐标系中。
• 径向线 - 与 线条 相似，但位于极坐标系中。
• 径向链接 - 与 链接 相似，但位于极坐标系中。