graph - D3 force layout: Finding relative center based on current visible view -
i have d3.js graph forced layout design. have allowed users zoom in , out of graph bounds set can't zoom in past 1 , can't zoom out past 0.1. right now, when plot values on graph, automatically send them center of graph (based on height , width of svg container). works fine until zoom out zoom in else , plot new node. new node end @ original center , not new relative center.
how scale when zooming right now:
function onzoom() { graph.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")"); }
i unable find calls current visible coordinates of graph, those, how use them calculate relative center of graph if svg graph size remains static?
for simple geometric zoom, it's straightforward figure out visible area visible area dimensions plus translation , scale settings. remember translation setting position of (0,0) origin relative to top left corner of display, if translation (-100,50), means top left corner @ (+100,-50) in coordinate system. likewise, if scale 2, means visible area covers 1/2 many units original width , height.
how access current transformation? graph.attr("transform")
give set transform attribute string, you'll need use regular expressions access numbers. easier query zoom behaviour directly using zoom.translate()
, zoom.scale()
.
with together, get
var viewcenter = []; viewcenter[0] = (-1)*zoom.translate()[0] + (0.5) * ( width/zoom.scale() ); viewcenter[1] = (-1)*zoom.translate()[1] + (0.5) * ( height/zoom.scale() );
i.e., position of center of visible area position of top-left corner of visible area, plus half visible width , height.
Comments
Post a Comment