javascript - 如何将 d3.js 中时间刻度的缩放限制为分钟？

Question

我有一个在 x 轴上使用时间刻度的 d3v4 图表。一切正常，但当我放大时，它永远不会停止。有没有办法让它在达到分钟刻度时停止缩放？

d3.scaleTime().range([0, width])
...
var zoom = d3.zoom()
      .scaleExtent([1, Infinity])
      .translateExtent([[0, 0], [width, height]])
      .extent([[0, 0], [width, height]])
      .on("zoom", zoomed);

如果我更改 Infinity，我可以阻止它缩放到某个数字，但问题是尺度的大小每次都不同，因此达到分钟尺度所需的尺度范围会有所不同。

Answer 1

您只需要设置您的 scaleExtent到适当的值。如果“每次缩放的大小都不一样”，只需设置scaleExtent使用初始域值:

var domainStart = new Date('1/1/2017'),
    domainEnd = new Date('2/1/2017');

var scale = d3.scaleTime()
  .domain([domainStart, domainEnd])
  .range([0, width])

...

// max zoom is the ratio of the initial domain extent to the minimum
// unit that you want to zoom to (1 minute == 1000*60 milliseconds)
var zoomMax = (domainEnd.getTime() - domainStart.getTime()) / (1000*60),
    zoomMin = 1;  

var zoom = d3.zoom()
  .scaleExtent([zoomMin, zoomMax])
  .translateExtent([[0, 0], [width, height]])
  .extent([[0, 0], [width, height]])
  .on("zoom", zoomed);