Styles: Stroke-Opacity, Width, Dasharray, and Linecap
Learn how to apply stroke-opacity, width, dasharray, and linecap styles to your D3 elements.
We'll cover the following
stroke-opacity
The stroke-opacity
style changes the transparency of the stroke (line) of an element.
The valid range for stroke-opacity
is from 0 (completely transparent) to 1 (solid colour). We should make the distinction at this point that stroke-opacity
affects only the line or border of an element, whereas opacity
will affect the entire element.
The following code snippet creates an empty circle with a red border. The opacity value of .2 creates a degree of transparency for the stroke, which will show the grid lines underneath (or at least make it appear more “muted”).
Get hands-on with 1200+ tech skills courses.