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

一个问题回答的问题限制了摇摄动作。但是，这使用轴，我没有。

我所拥有的是一个能够平移和缩放的力图。

现在我已经把限制使用该变焦：

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

我想知道我怎么去限制这个图形的平移运动，所以我不拖动视口的外网/图。

（该网络可根据导入的JSON文件改变大小，所以不能用精确的数字）

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

来源

2014-12-01 rekoDolph

在'zoom'事件处理程序，检查当前的翻译是否在范围之外要限制它，如果它不适用于SVG。 – 2014-12-01 16:53:37

那么你如何做到这一点？ @LarsKotthoff – rekoDolph 2014-12-02 11:29:09

这就是@Elijah在他的回答中所做的。 – 2014-12-02 11:30:33

没有等效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 

}

来源

2014-12-01 16:55:29 Elijah

我似乎无法弄清楚。我有“inner.attr（”transform“，”translate（“+ newT +”）“+”scale（“+ d3.event.scale +”）“）;”但它只移动对角线，但边界起作用。我究竟做错了什么？ :(@Elijah – rekoDolph 2014-12-02 12:07:51

把整个事情放在jsFiddle或gist.github.com上，我们可以更容易地看一眼并弄清楚。 – Elijah 2014-12-02 15:21:29

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

回答

相关问题