Add grid lines compatible with zoom and drag in d3.js

Question

I am trying to add grid lines to my existing code, and have seen many tutorials but none with zoomable and dragable grid lines.

A stripped version of my existing code is here :

http://jsfiddle.net/p4cmx1kj/

I understand that I must have a scale :

this.x = d3.scale.linear()
  .domain([this.options.xmin, this.options.xmax])
  .range([0, this.size.width]);

And draw it later. But I don't know how.

I would like to have vertical grid lines that "change" as I zoom (eg : go from 10-20-30-40 to 10-15-20-25) and move as I drag my graph around. How can I do that ?

Answer 1

I guess you could do something like this example :

http://blog.scottlogic.com/2014/09/26/an-interactive-stock-comparison-chart-with-d3.html

And then add some limit, where if above a certain threshold it adds more / less tick labels on the axis. (At-least that is what I plan to attempt to do on a force layout now).

Or better still make your labels a function of the range, eg something along the lines of min + n*(min-max)/4 , where n is your tick label {1,4}.