Proper way to draw gridlines

d3.js

Solution

Assuming that you have Mike Bostock's standard margins defined and you have defined a linear scale for the y-axis the following code will create horizontal gridlines without using `tickSize()`.

svg.selectAll("line.horizontalGrid").data(yScale.ticks(4)).enter()
    .append("line")
        .attr(
        {
            "class":"horizontalGrid",
            "x1" : margin.right,
            "x2" : width,
            "y1" : function(d){ return yScale(d);},
            "y2" : function(d){ return yScale(d);},
            "fill" : "none",
            "shape-rendering" : "crispEdges",
            "stroke" : "black",
            "stroke-width" : "1px"
        });

Problem

Okay, I'm starting to get a little more familiar with D3 but am still a little hazy on some things. I'm now trying to draw grid lines but am realizing that I may be hacking away versus doing it correctly. I tried to add some gridlines, using a tutorial, but ended up with a lot of code that I seem to be jimmy rigging in order to get it to line up properly. I was wondering if anyone could point me to a better way of writing this... The original code is this. ``` <script type="text/javascript"> //Width and height var w = 800; var h = 400; var padding = 20; var border=1; var bordercolor='black'; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, -467], [3,-90],[468,481] ]; // create scale functions var xScale = d3.scale.linear() .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })]) .range([padding, w - padding * 2]); var yScale = d3.scale.linear() .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })]) .range([h - padding, padding]); var rScale = d3.scale.linear() .domain( [-100, d3.max(dataset, function(d) { return d[1]; })] ) .range([2,5]); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h) .attr("border",border) ; //define X axis this is rly a function, remember, variables can hold functions in JS var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(1) .tickSize(-h, 0, 0) ; //Set rough # of ticks //Define Y axis var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(1) .tickSize(-w, 0, 0) ; //create the circles svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", 3); // draw axes here svg.append("g") .attr("class", "axis") //assign "axis" class .attr("transform", "translate(0," + (h - padding) +")") .call(xAxis); svg.append("g") .attr("class", "axis") //assign "axis" class .attr("transform", "translate(" + padding + ",0)" ) .call(yAxis); // end draw axes here </script> ``` and the code I added in the second link is here ``` var vis = svg.append("svg:g") .attr("transform", "translate(20,0)") var rules = vis.append("svg:g").classed("rules", true) rules.append("svg:g").classed("grid x_grid", true) .attr("transform", "translate(-20,"+h+")") .call(d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(4) .tickSize(-h,0,0) .tickFormat("") ) rules.append("svg:g").classed("grid y_grid", true) .call(d3.svg.axis() .scale(yScale) .orient("left") .ticks(5) .tickSize(-w,0,0) .tickFormat("") ) rules.append("svg:g").classed("labels x_labels", true) .attr("transform", "translate(-20,"+ h +")") .call(d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(4) .tickSize(0) .tickFormat("") // .tickFormat(d3.time.format("%Y/%m")) ) rules.append("svg:g").classed("labels y_labels", true) .call(d3.svg.axis() .scale(yScale) .orient("left") .ticks(5) .tickSubdivide(1) .tickSize(0, 0, 0) .tickFormat("") ) ``` Again, really appreciate any help

Original source