CODEWITHSUNDEEP
javascriptd3.js
rekoDolph
rekoDolph

Reputation: 823

How do I limit the panning on a force directed graph layout without axis ? D3/JS

There is a question here

d3.js: pan with limits

Answering the question to limiting the pan movement. But this uses axis, which I do not have.

What I have is a force directed graph which has the ability to pan and zoom.

Now I have put a limit on the zoom using :

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

I am wondering how do I go about limiting the pan movement of this graph so i dont drag the network/graph outside of the viewport.

(The network may change size depending on the JSON file imported, so I can't use exact figures)

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

Upvotes: 0

Views: 459

Answers (1)

Elijah
Elijah

Reputation: 4639

There is no equivalent zoom.extent. You can override zoom's translate with mins and maxes inside your redraw function, though. For instance, if you wanted to limit zoom to stay within 500px of its original position:

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

}

Upvotes: 1

Related Questions