Question

我不知道为什么wheelDelta不工作。它说wheeldelta不是一个功能。我想控制鼠标滚轮上下滚动的缩放级别。如果我可以定义delta值，那么我可以定义在滚动的单个刻度旋转上将发生多少缩放。默认行为太快了。我正在使用这个参考 https://github.com/d3/d3-zoom/blob/master/README.md#_zoom

 svg = d3.select("#treeSection").append("svg")
                   .attr("width", width + margin.right + margin.left)
                   .attr("height", height + margin.top + margin.bottom)
                   .call(d3.zoom()
                       .wheelDelta([2])
                       .scaleExtent([1 / 2, 4])
                       .on("zoom", zoomed));


               g = svg.append("g")
                   .attr("transform", "translate(" +
                       margin.left + "," + margin.top + ")");






           function zoomed() {
               g.attr("transform", d3.event.transform);
           }

Answer 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

如何在d3 v4中使用zoom.wheelDelta

1 个答案: