title: Proper way to draw gridlines
body: <p>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...</p>
  
  <p>The original code is this. </p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
  
              //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
          &lt;/script&gt;
  </code></pre>
  
  <p>and the code I added in the second link is here</p>
  
  <pre><code>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("")
      )
  </code></pre>
  
  <p>Again, really appreciate any help</p>