Search⌘ K
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization

Styles: Stroke-Opacity, Width, Dasharray, and Linecap

Explore how to control the appearance of lines in D3.js by adjusting stroke-opacity for transparency, stroke-width for thickness, stroke-dasharray for dashed patterns, and the stroke-linecap and stroke-linejoin properties to shape line ends and joins. This lesson helps you customize visual elements to enhance data visualization clarity.

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”).

JavaScript (JSX)
holder.append("circle")          // attach a circle
    .attr("cx", 200)             // position the x-centre
    .attr("cy", 100)             // position the y-centre
    .attr("r", 50)               // set the radius
    .style("stroke-opacity", .2) // set the stroke opacity
    .style("stroke", "red")      // set the line colour
    .style("fill", "none");      // set the fill colour

Which results in the following image:

Although it is not necessarily easy to see in this example because the line is quite thin, the lines of the grid behind the circle will be showing through the line of the circle.

stroke-width

The stroke-width style ...