mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
efd5cf1e1f
* d3-geo/azimuthal#geoGnomonic * bin * ribbon, contour * voronoi * drag * dsv * a batch of api * api * force * geo * color * diverging * linear * more scales * time * Fixing broken links in docs (#3661) * symlog_constant * fix voronoi links * more link fixes --------- Co-authored-by: Toph Tucker <tophtucker@gmail.com> Co-authored-by: Mike Bostock <mbostock@gmail.com>
38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# d3-shape
|
||
|
||
Visualizations can be represented by discrete graphical marks such as [symbols](./d3-shape/symbol.md), [arcs](./d3-shape/arc.md), [lines](./d3-shape/line.md), and [areas](./d3-shape/area.md). 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.
|
||
|
||
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](./d3-scale.md) fields of your data to fit the chart:
|
||
|
||
```js
|
||
const line = d3.line()
|
||
.x((d) => x(d.date))
|
||
.y((d) => y(d.value));
|
||
```
|
||
|
||
This line generator can then be used to compute the `d` attribute of an SVG path element:
|
||
|
||
```js
|
||
path.datum(data).attr("d", line);
|
||
```
|
||
|
||
Or you can use it to render to a Canvas 2D context:
|
||
|
||
```js
|
||
line.context(context)(data);
|
||
```
|
||
|
||
See one of:
|
||
|
||
- [Arcs](./d3-shape/arc.md) - circular or annular sectors, as in a pie or donut chart.
|
||
- [Areas](./d3-shape/area.md) - an area defined by a bounding topline and baseline, as in an area chart.
|
||
- [Curves](./d3-shape/curve.md) - interpolate between points to produce a continuous shape.
|
||
- [Lines](./d3-shape/line.md) - a spline or polyline, as in a line chart.
|
||
- [Links](./d3-shape/link.md) - a smooth cubic Bézier curve from a source to a target.
|
||
- [Pies](./d3-shape/pie.md) - compute angles for a pie or donut chart.
|
||
- [Stacks](./d3-shape/stack.md) - stack adjacent shapes, as in a stacked bar chart.
|
||
- [Symbols](./d3-shape/symbol.md) - a categorical shape encoding, as in a scatterplot.
|
||
- [Radial areas](./d3-shape/radial-area.md) - like [area](./d3-shape/area.md), but in polar coordinates.
|
||
- [Radial lines](./d3-shape/radial-line.md) - like [line](./d3-shape/line.md), but in polar coordinates.
|
||
- [Radial links](./d3-shape/radial-link.md) - like [link](./d3-shape/link.md), but in polar coordinates.
|