如何控制 D3 V4 中的缩放速度？

【问题标题】：How to control a zooming speed in D3 V4?如何控制 D3 V4 中的缩放速度？
【发布时间】：2018-01-16 22:50:58
【问题描述】：

我目前正在通过这个 bl.ocks：https://bl.ocks.org/mbostock/431a331294d2b5ddd33f947cf4c81319 研究 Mike Bostock 的缩放功能，我意识到可以通过这条线控制介绍缩放的速度：

.duration(1500)

还有没有这样的方法来控制滚动的缩放？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您可以使用wheelDelta 函数来实现做一个车轮增量函数

function myDelta() {
  return -d3.event.deltaY * (d3.event.deltaMode ? 120 : 1) / 1500;
}

您可以将常数 1500 增加到您选择的任意数量以调节增量。

现在在缩放中定义 wheelDelta，如下所示：

var zoom = d3.zoom()
    .scaleExtent([1, 32])
    .translateExtent([[0, 0], [width, height]])
    .extent([[0, 0], [width, height]])
    .wheelDelta(myDelta)//your function
    .on("zoom", zoomed);

参考here

工作代码here

【讨论】：