Add extra axis like lines to a line chart

[Bob Burbach]

Hi all I'm pretty new to d3 so I am sure I am just missing something easy, but I haven't had luck finding or experimenting...

I have a basic line graph (like the example) and want to add a few more vertical lines to the graph to call out particular events (in this case stages of a coffee roast that occur at a particular temperature). 

Should I be using an axis in this case? A line?

Feel free to just point me somewhere if there is an example that I haven't come across.

Thanks!

Bob

[Newbie]

This might help:)

http://benjchristensen.com/2012/05/02/line-graphs-using-d3-js/

[Bob Burbach]

First of all thanks. 

I took a look at those examples and it appears that they all are just setting the height of the 'ticks' on the x-axis to be the height of the graph.

Perhaps I am thinking about this wrong but it's not quite what I am hoping for. Basically I have a number of temperature readings that form the 'line' in the graph. In my data I also have a couple of events - each with an event name and the time that the event occurred. So I'd like to do something similar in appearance to the gray axis ticks in the examples you pointed me to, but only for these events placed on the graph at the appropriate places.

Does that make sense?

[Chris Viau]

You just have to draw a bunch of svg lines:

svg.append('line')

.attr({

    x1: x(10), // x() is your scaling function, 10 is the value where you want a line to be placed

    y1: 0, // height of your chart

    x2: x(10), // same as x1 for a horizontal line

    y2: chartH // height of your chart

});

When this works well, you can do it in a more d3 way, having a dataset or a filter for those values and draw them all in one loop.

[Bob Burbach]

Thanks Chris, that's what I needed! 

I was missing the scaling function and using x0, x1 rather than x1, x2...