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

我猜你可以做类似这样的事情：

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

然后添加一些限制，如果超过某个阈值，它会在轴上添加更多/更少的刻度标签。 （至少这是我计划在力布局上尝试做的事情）。

或者更好的是让你的标签成为范围的函数，例如沿着min + n *（min-max）/ 4的行，其中n是你的标签{1,4}。