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

原文 标签 javascript d3.js

我有一个在 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,我可以阻止它缩放到某个数字,但问题是尺度的大小每次都不同,因此达到分钟尺度所需的尺度范围会有所不同。

最佳答案

您只需要设置您的 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);

关于javascript - 如何将 d3.js 中时间刻度的缩放限制为分钟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45828472/

相关文章:

javascript - Ajax 在 </body> 之前尽快请求,还是在文档准备好时?

javascript - 在剪切路径中使用时重新计算滚动 div 位置

javascript - 将鼠标悬停在具有较高z-index的元素上的事件吗?

d3.js - 将超链接添加到可折叠树上的节点文本

javascript - D3 中的过滤选项

javascript - 使用递归组合数组值,即使它们为空

json - 带有子数组的 JS mod 的 D3 压缩圆子图

javascript - D3 过渡。在折线图上处理多条线,并希望在按下按钮时在线之间平滑过渡

angularjs - Angular-nvd3-directives 根据图表的宽度调整图表的高度

javascript - 更改 emscripten 中的默认命名空间 'Module'