Making a dashed line in d3.js

The following post is a portion of the D3 Tips and Tricks document which it free to download. To use this post in context, consider it with the others in the blog or just download the pdf  and / or the examples from the downloads page:-)

--------------------------------------------------------

Dashed lines totally rock!

OK, there may be an element of exaggeration there, but I certainly found it interesting that there didn't seem to be a lot of explanation for a simple bloke like myself to make a dashed line in D3. So for me they rocked :-)

One of the best parts about it is that they're so simple to do!

Literally one line!!!!

So lets imagine that we want to make the line on our simple graph dashed. All we have to do is insert the following line in our JavaScript code here;

svg.append("path")
        .attr("class", "line")
        .style("stroke-dasharray", ("3, 3"))  // <== This line here!!
        .attr("d", valueline(data));

And our graph ends up like this;

Hey! It's dashtastic!

So how does it work?

Well, obviously "stroke-dasharray" is a style for the path element, but the magic is in the numbers.

Essentially they describe the on length and off length of the line. So "3, 3" translates to 3 pixels (or whatever they are) on and 3 pixels off. Then it repeats. Simple eh?

So, experiment time :-)

What would the following represent?

“5, 5, 5, 5, 5, 5, 10, 5, 10, 5, 10, 5”

Try not to cheat...

Ahh yes, Mr Morse would be proud.

And you can put them anywhere. Here's our axes perverted with dashes;

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .style("stroke-dasharray", ("3, 3"))
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .style("stroke-dasharray", ("3, 3"))
        .call(yAxis);

Well... I suppose you can have too much of a good thing. With great power comes great responsibility. Use your dash skills wisely and only for good.

The above description (and heaps of other stuff) is in the D3 Tips and Tricks document that can be accessed from the downloads page of d3noob.org.