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