Adding Grid to D3.js Line Chart - grid

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);

Answer 2

You can draw background grid like this:
//vertical lines
svg.selectAll(".vline").data(d3.range(26)).enter()
.append("line")
.attr("x1", function (d) {
return d * 20;
})
.attr("x2", function (d) {
return d * 20;
})
.attr("y1", function (d) {
return 0;
})
.attr("y2", function (d) {
return 500;
})
.style("stroke", "#eee");
// horizontal lines
svg.selectAll(".vline").data(d3.range(26)).enter()
.append("line")
.attr("y1", function (d) {
return d * 20;
})
.attr("y2", function (d) {
return d * 20;
})
.attr("x1", function (d) {
return 0;
})
.attr("x2", function (d) {
return 500;
})
.style("stroke", "#eee");
You can see here how it works with your jsfiddle (updated):
http://jsfiddle.net/cuckovic/Phzvy/