Proper way to draw gridlines

Question

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 hackin

Answer 1

Following @arete's idea, you can use the following to avoid re-drawing unnecessarily the gridline:

function createsGrid(data) {
       var grid = gridLine.selectAll("line.horizontalGrid").data(scaleY.ticks());

       grid.enter()
       .append("line")
       .attr("class","horizontalGrid");

       grid.exit().remove();

       grid.attr({
               "x1":0,
               "x2": width,
               "y1": function (d) { return scaleY(d); },
               "y2": function (d) { return scaleY(d); }
                });
}

and define the following in your CSS file

line.horizonalGrid{
  fill : none;
 shape-rendering : crispEdges;
 stroke : black;
 stroke-width : 1.5px;
}