Friday 4 January 2013

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.

1. thanks!! this help rocks.

1. Cool! You're welcome :-)

2. Great post! I had a question maybe you could help me with. I want to mix a solid and dotted line in a line chart. You can see an example of this on LinkedIn where the most recent day they report on is a dotted line.

They use High Charts which is far less configurable so I have to assume D3 can so it.. Thanks in advance!

1. Hi Matthew. Sorry, I'm not a LinkedIn user, so I'm not entirely sure what you mean. Would you be able to post a link to a page with an example? Cheers

3. I think Matthew is asking, using your above demonstrated chart on this page for example, how to make the line dash pattern change after say, Apr 22.

D3noob hopefully has a better way, but off the top of my head I think you could use a dc.js composite chart to overlap two different line charts. The first line would have your first dash style, or solid, and the second would have the other, in this case dotted. You would want to split your data at the Apr 22 point, and feed the data prior to it to the first line chart, and the data after to the second line chart. The composite chart should be able to compose them on top of each other.

Again this is stream of conscious, and so I think there will be some interesting behavior around the mouseover nodes of the adjacent/overlapping areas.

I hope this helps!