D3 Tips and Tricks: Interactive Data Visualization/

...

/

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

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

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