添加与缩放兼容的网格线，并在 d3.js 中拖动

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

本文关键字：d3 并在 js 拖动 网格线 缩放 添加      更新时间：2023-09-26

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

我现有代码的剥离版本在这里：

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），并在我拖动图表时移动。我该怎么做？

我想你可以做这样的例子：

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

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

或者更好的是让你的标签成为范围的函数，例如，类似于 min + n*（min-max）/4 的东西，其中 n 是你的刻度标签 {1,4}。

相关文章：