如何在d3 v4中使用zoom.wheelDelta

我不知道爲什麼wheelDelta無法正常工作。它說wheeldelta不是一個功能。我想控制鼠標滾輪上下滾動的縮放級別。如果我可以定義增量值，那麼我可以定義滾動的單個滴答旋轉將發生多少變焦。默認行爲太快。我使用這個參考 https://github.com/d3/d3-zoom/blob/master/README.md#_zoom 如何在d3 v4中使用zoom.wheelDelta

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

來源

2017-07-06 ankit joshi

您必須指定一個功能，而不是一個數組。 –

但文件說明它只需要一個增量值。因爲我使用scaleExtent https://github.com/d3/d3-zoom/blob/master/README.md#_zoom –

它說*「如果delta被指定，將輪子delta函數設置爲指定的**函數** 「*。 –

定義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

來源

2017-08-09 08:07:48 Cyril

感謝兄弟。我的代碼的問題是，D3的vesion是4.2.0，你使用的版本是4.10.0。現在它的工作很好。我把我的D3版本改爲4.10.0 –

如何在d3 v4中使用zoom.wheelDelta

回答

相關問題