如何限制没有轴的力有向图布局上的平移？ 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。不过，您可以在重绘函数中使用 mins 和 maxes 覆盖缩放的转换。例如，如果您想将缩放限制在其原始位置的 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

}