SVG path element

As explained in D3.js in Action, Third Edition

An SVG path is a <path> element whose d attribute contains drawing commands for lines, curves, and optionally closed shapes.

An SVG <path> draws flexible shapes that primitive elements such as <line>, <rect>, and <circle> cannot easily express. Its shape comes from the d attribute: a sequence of commands that sets a starting point and endpoint, changes direction with curves, and can leave the path open or close it into a shape. section 4.0

A path can be styled like other SVG shapes. Use fill="none" when the visible result should be only an outline, then use stroke and stroke-width to make the line visible and control its thickness. section 1.2.2

Drawing a curved path

This path starts at 680,150 with M, curves through control points with C, and continues with S. The stroke makes the curve visible while fill="none" prevents an interior fill. <path d="M680 150 C 710 80, 725 80, 755 150 S 810 220, 840 150" fill="none" stroke="#773b9a" stroke-width="3" /> section 1.2.2

Writing d strings by hand is practical for simple paths but quickly becomes difficult as shapes gain commands and curves. D3 shape generators can produce path data for visualization forms such as line-chart lines and curves, areas, and arcs. section 4.0

Figure 4.1 Project that we’ll build in this chapter: a line chart of the temperature evolution in New York City in 2021 and a set of arcs showing the percentage of days with precipitation

See paths used as chart marks: a temperature line and precipitation arcs. section 4.0

How D3.js in Action, Third Edition covers it

How deep it goes

Defines the d attribute and illustrates a curved path, while deferring path construction to D3 shape generators.

Examples

Uses a purple stroked curve with control points, plus temperature lines and precipitation arcs for New York City weather data.

What it assumes

Introduces paths after familiar SVG lines, rectangles, and circles, without requiring manual construction of complex d strings.

What you can do after

Apply it via D3 shape generators to create path data for lines, curves, areas, and arcs.

How it connects

Connects SVG paths to D3 shape generators, line charts, area charts, arcs, axes, and the margin convention.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

• SVG path data attributehas part · The SVG path data attribute is the d attribute whose value encodes commands and coordinates defining an SVG path's geometry.
• geo path generatorproduced by · A geo path generator is a D3 function that converts GeoJSON geographic data into SVG path data according to a geographic projection.
• area generatorproduced by · A D3 area generator converts configured upper and lower boundary data into SVG path geometry for a filled area.
• arc generatorproduced by · An arc generator is a D3 shape generator that produces SVG path data for circular or annular arcs from radius and angle parameters.
• edgeincludes · An edge is a graph connection between two vertices that represents a relationship and may be directed, labeled, or weighted.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.