javascript - 在d3.js中添加兼容缩放和拖动的网格线

Question

我正在尝试将网格线添加到现有代码中，并且看过很多教程，但没有一个具有可缩放和可拖动的网格线。

我现有代码的精简版本在这里:

http://jsfiddle.net/p4cmx1kj/

我知道我必须有一个秤:

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

稍后再画。但我不知道怎么办。

我想要垂直网格线在缩放时“变化”(例如:从 10-20-30-40 到 10-15-20-25)并随着我的移动而移动拖动我的图表。我怎样才能做到这一点？

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}。