は、スクロールイベントをx方向とy方向の両方にバインドしてsvgをパンする方法はありますか？

Question

現在、私のd3ツリーは上下にスクロールするたびにズーム動作をします。私は代わりにその動作をパンと置き換えたいと思っています。どのように私はこれについて行くだろう誰も考えを持っていますか？

// Define the zoom function for the zoomable tree 
    function zoom() { 
     svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
    } 

    // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents 
    var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3,1]).on("zoom", zoom); 

    // define the baseSvg, attaching a class for styling and the zoomListener 
    var baseSvg = d3.select("#tree-container").append("svg") 
     .attr("width", viewerWidth) 
     .attr("height", viewerHeight) 
     .attr("class", "overlay") 
     .call(zoomListener); 

Answer 1

ここでは、デフォルトのズーム機能をパンに変更する方法を示します。私はstackoverflow上の良い投稿を含めて見つけることができた様々なリソースがあった。

function panTo() { 
    var current_translate = d3.transform(svgGroup.attr("transform")).translate; 

    var dx = d3.event.wheelDeltaX + current_translate[0]; 
    var dy = d3.event.wheelDeltaY + current_translate[1]; 

    svgGroup.attr("transform", "translate(" + [dx,dy] + ")"); 
    d3.event.stopPropagation(); 
} 

// Define the zoom function for the zoomable tree 
function zoom() { 
    svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 


// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents 
var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3,1]).on("zoom", zoom); 

// define the baseSvg, attaching a class for styling and the zoomListener 
var baseSvg = d3.select("#tree-container").append("svg") 
    .attr("width", viewerWidth) 
    .attr("height", viewerHeight) 
    .attr("class", "overlay") 
    .call(zoomListener) 
    .on("wheel.zoom",panTo) 
    .on("mousewheel.zoom", panTo) 
    .on("DOMMouseScroll.zoom", panTo)