如何在D3 V4中控制变焦速度?

时间:2017-08-09 07:20:09

标签: javascript d3.js

我目前正在研究这个bl.ocks:https://bl.ocks.org/mbostock/431a331294d2b5ddd33f947cf4c81319的Mike Bostock缩放功能,我意识到可以从这一行控制介绍缩放的速度:

.duration(1500)

还有这样一种控制滚动缩放的方法吗?

1 个答案:

答案 0 :(得分:3)

您可以使用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