I am working on a bounded force layout with a zoom and pan (D3.js). The main problem is that I'm not able to adequately customize the zoom behavior.
My graph contains several movable elements, that a user can move through the svg-element. So I implemented a bounding box to prevent the user to push outside the graph.
I configured my tick function in this way:
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)
It worked well until I decided to add a zoom and pan feature.
I limited the scale of my zoom : zoom.scaleExtent([0.5, 2]);
So I thought that when I zoom out, my drawing will be shrink by 50%, so doing something like that will be enough:
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));
But it appears that my graph is not correctly delimited, is there something wrong with these formulas?
Also, the entire graph is draggable when the user clicks on a blank area thanks to:
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?)
However this rectangle is draggable indefinitely, and it's not convenient for a bounded force layout. How can I delimit it?
