D3

d3-shape ​

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

🌐 Visualizations can be represented by discrete graphical marks such as symbols, arcs, lines, and areas. While the rectangles of a bar chart may sometimes be simple, other shapes are complex, such as rounded annular sectors and Catmull–Rom splines. The d3-shape module provides a variety of shape generators for your convenience.

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

🌐 As with other aspects of D3, these shapes are driven by data: each shape generator exposes accessors that control how the input data are mapped to a visual representation. For example, you might define a line generator for a time series by scaling fields of your data to fit the chart:

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

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

🌐 This line generator can then be used to compute the d attribute of an SVG path element:

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

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

🌐 Or you can use it to render to a Canvas 2D context:

js
line.context(context)(data);

请参阅以下之一：

🌐 See one of:

  • 弧 - 圆形或环形扇区，如饼图或甜甜圈图中的扇区。
  • 区域 - 由上边界线和下边界线定义的区域，如面积图中的区域。
  • 曲线 - 在点之间插值以生成连续的形状。
  • 线 - 样条曲线或折线图，如折线图中所示。
  • 链接 - 从源到目标的平滑三次贝塞尔曲线。
  • 饼图 - 计算饼图或圆环图的角度。
  • 堆叠 - 将相邻的形状堆叠，就像在堆叠柱状图中一样。
  • 符号 - 一种类别形状编码，就像在散点图中一样。
  • 径向区域 - 类似于 区域，但使用极坐标。
  • 径向线 - 类似 线，但在极坐标中。
  • 径向链接 - 类似 链接，但使用极坐标。