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

In the d3fc project we have created a gridlines component that renders in exactly the same way as the D3(v4) axis.

Here's an example of the usage:

var width = 500, height = 250;
var container = d3.select("#gridlines")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scaleLinear()
  .range([0, 100]);

var yScale = d3.scaleLinear()
  .range([0, 100]);

var gridline = fc.annotationSvgGridline()
  .xScale(xScale)
  .yScale(yScale);

container.append("g")
  .call(gridline);

Which renders as follows:

The spacing of the gridlines is determined by the ticks supplied by the associated axes.

Disclosure: I am a core contributor to the d3fc project!