如何在沒有軸的強制導向圖形佈局上限制平移？ D3/JS

Question

這裏有

d3.js: pan with limits

一個問題回答的問題限制了搖攝動作。但是，這使用軸，我沒有。

我所擁有的是一個能夠平移和縮放的力圖。

現在我已經把限制使用該變焦：

.call(d3.behavior.zoom().on("zoom", redraw).scaleExtent([0.8, 2])) 

我想知道我怎麼去限制這個圖形的平移運動，所以我不拖動視口的外網/圖。

（該網絡可根據導入的JSON文件改變大小，所以不能用精確的數字）

inner.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 

Answer 1

沒有等效zoom.extent。不過，您可以在重繪功能中使用分鐘和最大值來重寫縮放的翻譯。舉例來說，如果你想限制變焦留內原來的位置的500像素：

function redraw() { 

var oldT = yourZoom.translate() 
var newT = [0,0] 
newT[0] = Math.max(-500,oldT[0]); 
newT[0] = Math.min(500,oldT[0]); 
newT[1] = Math.max(-500,oldT[0]); 
newT[1] = Math.min(500,oldT[0]); 
yourZoom.translate(newT); 

//The rest of your redraw function, now using the updated translate on your zoom 

}