Axis grid using groups

_.md

[ D3 axis grid using grouped elements ] 4528210 by nsonnad

config.json

{"description":"Axis grid using groups","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":14},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.571875,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var width = 400; 
var height = 400; 

var gridGraph = d3.select("svg") 
	.append("svg") 
	.attr("width", width) 
	.attr("height", height)

var xGraph = gridGraph.append("g"); 
var yGraph = gridGraph.append("g"); 

var yaxiscoorddata = d3.range(25, height, 25); 
var xaxiscoorddata = d3.range(25, width, 25); 

// Vertical lines 
xGraph.selectAll("line")
	.data(xaxiscoorddata) 
	.enter().append("svg:line") 
    .attr("x1", function(d){return d;}) 
    .attr("y1", 25) 
    .attr("x2", function(d){return d;}) 
    .attr("y2", height-25) 
    .style("stroke", "rgb(6,120,155)") 
    .style("stroke-width", 2); 

// Horizontal lines (these do not get drawn) 
yGraph.selectAll("line") 
    .data(yaxiscoorddata) 
    .enter().append("svg:line") 
    .attr("x1", 25) 
    .attr("y1", function(d){return d;}) 
    .attr("x2", width-25) 
    .attr("y2", function(d){return d;}) 
    .style("stroke", "rgb(6,120,155)") 
    .style("stroke-width", 2);