Question

I have the following D3 chart (use 12842311 as input): http://www.uscfstats.com/deltas

After loading the chart, click the grid button (only after loading). A grid will appear. The obvious problem is that the vertical lines are only on the top half of the chart.

This is because D3, as far as I know, only lets you specify an offset for the beginning of the tick mark, which is how I’m doing it, and then doesn’t let you specify an ending offset. I also think that you have to do it with tick marks because otherwise you don’t know the location of the ticks unless you do something complicated.

How can I get around this limitation and do a grid with vertical lines across the x-axis? It seems like it shouldn’t be difficult. Am I even going about the creation of a grid in the right way?

var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(15);

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

Answer 1

The easiest way I could get this to work was to manually resize and translate the tick marks.

  svg.selectAll(".y line")
      .attr("x2", width);

  svg.selectAll(".x line")
      .attr("y2", height)
      .attr("transform", "translate(0," + (-y(0)) + ")"); 

You can see a working example at http://jsfiddle.net/2y3er/2/.