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

Question

I have a d3v4 chart using time scale on the x axis. Everything is working fine, but when I zoom in, it never stops. Is there a way to make it stop zooming when the minute scale is reached?

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

I am able to stop it from zooming if I change Infinity to some number, but the problem is that the size of the scale is different every time so the scale extent needed to reach the minute scale varies.

Answer 1

You just need to set your scaleExtent to the proper values. If "the size of the scale is different every time", just set scaleExtent using the initial domain values:

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