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更改为某个数字，我可以停止缩放，但问题是每次刻度的大小都不同，因此达到分钟刻度所需的刻度范围会有所不同。 / p>

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

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

1 个答案: