如何禁用d3.behavior.zoom的pan？

Question

這個問題看起來與this one非常相似，但是我仍然無法弄清楚是否可以使用d3.behavior.zoom但沒有pan功能。換句話說，我只想使用輪子放大/縮小。

原因是我希望能夠刷上「可縮放」區域。

謝謝！

Answer 1

假設你已經定義了一個縮放行爲：

var zoom = d3.behavior.zoom().on('zoom', update); 

當您將變焦行爲選擇，你可以註銷事件監聽器，它內部使用來檢測和一定的交互響應。在你的情況下，你會想要做這樣的事情：

selection.call(zoom) 
    .on("mousedown.zoom", null) 
    .on("touchstart.zoom", null) 
    .on("touchmove.zoom", null) 
    .on("touchend.zoom", null); 

我不確定你想要刪除觸摸事件。這樣做可能會消除雙擊縮放。你應該試試這些。

Answer 2

我想這將是很好的共享我發現解決這個問題的解決方法。我所做的是使用監聽器上刷開始爲「禁用」縮放：

zoom.on("zoom",null); 
selection.call(zoom); 

，並再次激活它的brushend事件。

還有一個竅門要考慮到的，來自一個事實，即它來保存規模和過渡值的最後一個有效放大的互動，讓你激活刷的時候使用這些值是非常重要的在brushend事件這樣

zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom); 
selection.call(scatterZoom); 

我很想聽到其他更「優雅」解決這個問題。

Answer 3

我找到的一個解決方案是在啓用縮放功能的元素（它們必須是兄弟）前面粘貼一個矩形元素，並將其填充設置爲「透明」，當我想禁用縮放交互或「無」 ，當我想啓用縮放交互。它看起來是這樣的：

if (chart._disableZoom) { 
    var rootPanel = d3.select('.rootPanel'); // this is the parent of the element that can be zoomed and panned 
    if (!rootPanel.select('.stopEventPanel').node()) { // create panel if it doesn't exist yet 
     //.stopEventPanel is appended next to the zoom-enabled element 
     rootPanel.append('rect').attr('class', 'stopEventPanel').attr('width', renderConfig.width).attr('height', renderConfig.height).attr('fill', 'transparent'); 
    } else { // disable zoom and pan 
     rootPanel.select('.stopEventPanel').attr('fill', 'transparent'); 
    } 
} else { // enable zoom and pan 
    d3.select('.rootPanel').select('.stopEventPanel').attr('fill', 'none'); 
}