我正在使用缩放和平移(D3.js)进行有界力布局。主要问题是我无法充分自定义缩放行为。
我的图表包含几个可移动元素,用户可以通过svg-element移动。所以我实现了一个边界框,以防止用户超出图形。
我以这种方式配置了我的tick函数:
function tick() {
// r: radius of a circle ; w: width ; h: height
node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
(http://bl.ocks.org/mbostock/1129492)
在我决定添加缩放和平移功能之前,它一直运行良好。
我限制了缩放比例:zoom.scaleExtent([0.5,2]);
所以我认为当我缩小时,我的绘图会缩小50%,所以做这样的事情就足够了:
d.x = Math.max(r, Math.min((w*0.5+W) - r, d.x));
d.y = Math.max(r, Math.min((h*0.5+h) - r, d.y));
但似乎我的图表没有正确分隔,这些公式有问题吗?
此外,当用户点击空白区域时,整个图表都可以拖动,这要归功于:
vis.append('svg:rect')
.attr('width', w)
.attr('height', h)
.attr('fill', 'white');
(Is there a way to zoom into a D3 force layout graph?)
但是这个矩形可以无限拖动,并且对于有界力布局来说不方便。我该如何划界?