Adding rules to charts that use d3.svg.axis

Question

I'm using a line chart that's essentially a copy of the code at http://bl.ocks.org/3883245 . I would like to add horizontal rules to the graph, however when I try to access the calculated tick values via yAxis.tickValues() I only get a null response. Am I going about that correctly?

Answer 1

tickValues is used to set custom, externally determined tick positions. So if you let the axis choose the values then this property will properly be null.

The easiest way to add grid lines is actually to add another axis! In the example you linked immediately following the lines:

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

you can add the following to append a grid:

svg.append("g").attr("class", "xaxisgrid").call( xAxis.tickFormat("").tickSize(450) );

svg.select("g.xaxisgrid").selectAll(".tick")
    .style('stroke', "#000")
    .style('opacity', 0.4)
    .filter(function(d, i){ return d3.select(this).classed('minor');} )
        .style('opacity', 0.1);

svg.select("g.xaxisgrid .domain").style('fill', 'none');

The code is a bit rough, but should get you started. Basically I am slightly modifying the axis generation function(xAxis) to generate only ticks, and then I am making the ticks really long.