Javascript 如何在没有轴的力定向图形布局上限制平移？D3/JS

这里有一个问题

回答限制平移运动的问题。但这使用了axis，我没有

我有一个力定向图，可以平移和缩放

现在，我使用以下方法对缩放进行了限制：

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

我想知道如何限制此图形的平移运动，以便不将网络/图形拖到视口之外

（网络可能会根据导入的JSON文件改变大小，因此我无法使用确切的数字）

---

没有等效的zoom.extent。不过，您可以在重画函数中使用mins和maxes覆盖zoom的translate。例如，如果要将缩放限制在其原始位置的500px范围内：

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

}

---

在

zoom

事件处理程序中，检查当前翻译是否超出了您想要限制的范围，如果超出了范围，则不将其应用于SVG。那么如何做到这一点@拉斯科托夫这就是以利亚在他的回答中所做的。好的。我懂了。他将“剩下的重画功能，现在在缩放中使用更新的平移”。如何将其应用于我的：“inner.attr（“transform”、“translate”（+d3.event.translate+）”）+“scale”（+d3.event.scale+）”）@Larskotthoff如果你对答案有疑问，请对答案发表评论。我似乎无法理解。我有“inner.attr（“transform”，“translate”（+newT+）”）+“scale”（+d3.event.scale+）”）；”但它只移动对角线，但边界可以工作。我做错了什么（@elijahdle）把整个事情放到jsFiddle或gist.github.com上，我们就可以更容易地看一看并弄明白。

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

}