D3

d3-shape ​

可视化可以用离散的图形标记表示，例如 symbols、arcs、lines 和 areas。条形图的矩形有时可能很简单，但其他形状则很复杂，例如圆角环形扇区和 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 的其他方面一样，这些形状由数据驱动：每个形状生成器都公开访问器，用于控制如何将输入数据映射到可视化表示。例如，你可以通过数据的 scaling 个字段为时间序列定义一个线条生成器，以适应图表：

¥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:

  • 圆弧 - 圆形或环形扇区，如饼图或环形图。

    ¥Arcs - circular or annular sectors, as in a pie or donut chart.

  • 区域 - 由边界顶线和基线定义的区域，如面积图所示。

    ¥Areas - an area defined by a bounding topline and baseline, as in an area chart.

  • 曲线 - 在点之间插值以生成连续形状。

    ¥Curves - interpolate between points to produce a continuous shape.

  • 直线 - 样条曲线或折线，如折线图。

    ¥Lines - a spline or polyline, as in a line chart.

  • 链接 - 从源到目标的平滑三次贝塞尔曲线。

    ¥Links - a smooth cubic Bézier curve from a source to a target.

  • 饼图 - 计算饼图或环形图的角度。

    ¥Pies - compute angles for a pie or donut chart.

  • 堆栈 - 堆叠相邻形状，就像堆叠条形图一样。

    ¥Stacks - stack adjacent shapes, as in a stacked bar chart.

  • 符号 - 分类形状编码，例如散点图。

    ¥Symbols - a categorical shape encoding, as in a scatterplot.

  • 径向区域 - 类似 area，但采用极坐标。

    ¥Radial areas - like area, but in polar coordinates.

  • 径向线 - 类似 line，但采用极坐标。

    ¥Radial lines - like line, but in polar coordinates.

  • 径向链接 - 类似 link，但采用极坐标。

    ¥Radial links - like link, but in polar coordinates.