Adding Grid to D3.js Line Chart

Question

I have this Line Chart here:

jsfiddle.net/yfqQ4/

My Problem now is, that I don't get a proper grid in the background working with a legend (y and x-Axis) like this: http://lab.creativebrains.net/linechart.png

Can anybody can post me a code snippet how I should implement it or something like that?

Thanks!

Answer 1

I would suggest to use d3.svg.axis().scale() to tie up the grid to your coordinates. I drew a quick example based on your code: http://jsfiddle.net/yfqQ4/5/

The gist is to use the existing scales, x and y, and to use ticks as grid. Notice that height and width are the variable defining the size of your container. Here is the relevant code:

var numberOfTicks = 6;

var yAxisGrid = d3.svg.axis().scale(y)
  .ticks(numberOfTicks) 
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right");

var xAxisGrid = d3.svg.axis().scale(x)
  .ticks(numberOfTicks) 
  .tickSize(-height, 0)
  .tickFormat("")
  .orient("top");

svg.append("g")
  .classed('y', true)
  .classed('axis', true)
  .call(yAxisGrid);

svg.append("g")
  .classed('x', true)
  .classed('axis', true)
  .call(xAxisGrid);