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

Question

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

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);