FORCE DIRECTED GRAPH WITH LIMITED PANNING

[Zlatan Sadibasic]

I am trying to set some constraints in a way so that when the graph is panned(left, right, up, down), we limit it in a way so that the panning left, for example, would stop at the farthest node. LINK TO THE FIDDLE

PANNING LEFT SHOULD BEHAVE SIMILAR TO THIS:

PANNING UP SHOULD BEHAVE LIKE THIS:

[Ram Tobolski]

Hello,

To limit panning, use zoom.translateExtent

See here

simulation.on("end", simend);


function simend (){
  var x = d3.extent(graph.nodes, function(node){
    return node.x
  }),
   y = d3.extent(graph.nodes, function(node){
    return node.y
  })
  zoom.translateExtent([[-x[1],-y[1]],[2*width-x[0],2*height-y[0]]])
}

[Zlatan Sadibasic]

• What about when we are zooming in or out? I'd like to keep these limits when zoomed in/out? If you zoom out the algorithm no longer applies.
  

[Mary Bartlett]

I'm having this exact same issue here too, was just about to post a question myself about how you use zoom.translateExtent when the item has been zoomed.

I've got a tree which is centralised in the browser and I always want to show the last "card" so it never disappears fully off screen, works perfectly at 1x zoom but when you zoom in or out, the translateExtent is wrong.

Here's an example.