D3力佈局：在拖動使鍋（變焦）平滑

Question

我有一個d3.js靜力佈局圖，可以得到相當大的（有時它的一部分被剪切），所以我想，讓用戶通過拖動來平移整個圖形。我不認爲我需要拖動單個節點，但我有一種感覺會讓人困惑，但想要顯示由svg邊界剪切的圖形部分。

我在http://bl.ocks.org/3811811其中有一個最小的例子使用

visF.append("rect") 
.attr("class", "background") 
.attr("width", width) 
.attr("height", height) 
.call(d3.behavior.zoom().on("zoom", redrawVisF)); 
function redrawVisF() { 
    visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
} 

實現平移，但我覺得它真的是「skittery」，而不是很流暢可言，到這種地步，我猜它會阻止人們嘗試拖動功能。有沒有人知道爲什麼發生這種情況和/或如何解決它的想法？

Answer 1

的問題是，d3.behavior.zoom獲取當前頁相對於點擊物品的容器元素鼠標的位置，而你正在移動的容器元素！所以相對位置不斷變化，因此你看到的抖動效應。

您可能想要移動背景<rect>，以便它是<svg>元素的直接子元素。這實現了兩件事：

1. 該位置現在將相對於<svg>容器，它不移動。
2. 目前，你當你縮放或平移，因此可縮放的面積變化和視口的某些部分不再縮放移動<rect>。在同一個地方有背景<rect>也解決了這個問題。