Hi All, After days of search I found an example [1] which have the zoom-out to fit view-port functionality. It's base on d3.js and cola.v3.js. So I was able to get a calculation idea from it. See the code below [Solved].
[1] - http://marvl.infotech.monash.edu/webcola/examples/browsemovies.html function zoomFit(){ var graphBBox = d3.select("svg g#mainG").node().getBBox(), graphScreen = $("svg"); var scaleAmount = Math.min(graphScreen.width()/(graphBBox.width), graphScreen.height()/(graphBBox.height)); var xOffSet = graphBBox.x > 0 ? -Math.abs(graphBBox.x) : Math.abs(graphBBox.x), yOffSet = graphBBox.y > 0 ? -Math.abs(graphBBox.y) : Math.abs(graphBBox.y); var tx = (xOffSet*scaleAmount + (graphScreen.width()/scaleAmount - graphBBox.width) * scaleAmount/2), ty = (yOffSet*scaleAmount + (graphScreen.height()/scaleAmount - graphBBox.height) * scaleAmount/2); zoom.translate([tx, ty]).scale(scaleAmount); zoom.event(svg); } Thanks! Jerad On Thu, Jan 29, 2015 at 10:55 AM, Jerad Rutnam <[email protected]> wrote: > Hi, > > Centering graph works fine with below calculation. But it effects the > *zoom.event* which works fine at the moment. So I had to revert it back > to the old method. > > var graphBBoxClient = graph[1].getBoundingClientRect(); > > var x = graphBBox.x > 0 ? (graphScreen.width() - graphBBoxClient.width) - > Math.abs(graphBBox.x) : (graphScreen.width() - graphBBoxClient.width) + > Math.abs(graphBBox.x); > var y = graphBBox.y > 0 ? (graphScreen.height() - graphBBoxClient.height) - > Math.abs(graphBBox.y) : (graphScreen.height() - graphBBoxClient.height) + > Math.abs(graphBBox.y); > > d3.select("svg g#mainG").transition().attr("transform", > "scale("+scaleAmount+") translate("+x+","+y+")"); > > So i'm trying to calculate it properly using the current values, which i'm > getting already. but bounding box coordinate values cause a problem. If > anyone can help me to figure it out the centering graph would be appreciate. > > Here is my current code, > > var zoom = d3.behavior.zoom().on("zoom", redraw); > > function getCenter() { > var center = { > x : this.width / 2, > y : this.height / 2 > }; > return center; > } > > function zoomIn(){ > var coor = zoom.translate(); > var x = (coor[0] - getCenter().x) * 1.1 + getCenter().x; > var y = (coor[1] - getCenter().y) * 1.1 + getCenter().y; > > zoom.scale(zoom.scale() * 1.1); > zoom.translate([x, y]); > > zoom.event(svg); > } > > function zoomOut(){ > var coor = zoom.translate(); > var x = (coor[0] - getCenter().x) * 0.9 + getCenter().x; > var y = (coor[1] - getCenter().y) * 0.9 + getCenter().y; > > zoom.scale(zoom.scale() * 0.9); > zoom.translate([x, y]); > > zoom.event(svg); > } > > function zoomFit(){ > > var graph = [d3.select("svg").node(),d3.select("svg g#mainG").node()], > svgBBox = graph[0].getBBox(), > graphBBox = graph[1].getBBox(), > graphScreen = $("svg"); > > var graphScreenWidth = graphScreen.width() / graphBBox.width, > graphScreenHeight = graphScreen.height() / graphBBox.height, > scaleAmount = graphScreenWidth > graphScreenHeight ? graphScreenHeight : > graphScreenWidth; > > var xOffSet = graphBBox.x > 0 ? -Math.abs(graphBBox.x) : Math.abs > (graphBBox.x), > yOffSet = graphBBox.y > 0 ? -Math.abs(graphBBox.y) : Math.abs(graphBBox.y) > ; > > // Where the calculation should be done > var x = getCenter().x - scaleAmount * getCenter().x; > var y = getCenter().y - scaleAmount * getCenter().y; > > zoom.scale(scaleAmount); > zoom.translate([x, y]); > > zoom.event(svg); > } > > Thanks, > Jerad > > > On Wed, Jan 28, 2015 at 11:32 AM, Jerad Rutnam <[email protected]> wrote: > >> Hi, >> >> I found that issue is not the way I calculate, but it was causing by a >> SVG Group (g) Element Bounding Box X,Y coordinates. So I just had to >> subtract it. >> >> If anyone needs to get the svg boundingBox values use the code (this >> returns an array), >> >> d3.select("svg g#groupElement").node().getBBox(); >> >> d3.select("svg g#groupElement").node().getBoundingClientRect(); >> >> If wants to get from jquery, >> >> $("svg").find("g")[0].getClientRects()[0]; >> >> Thanks, >> Jerad >> >> On Mon, Jan 26, 2015 at 1:54 PM, Jerad Rutnam <[email protected]> wrote: >> >>> Hi All, >>> >>> I'm working on a feature in G-Reg (Dependency Graph) using D3. And >>> having an issue to centering the graph after zoom-out to screen-size in >>> viewport. >>> >>> Currently I'm getting these values, >>> >>> graphScreen = "svg"; >>> >>> mainGraphGroup = "svg g" >>> >>> var topOffset = (graphScreen.width() - mainGraphGroupWidth)/2, >>> leftOffset = (graphScreen.height() - mainGraphGroupHeight)/2; >>> >>> Is there anyway I can achieve centering by these values? or is there a >>> method to achieving this? Any help will be appreciate. Searched on web but >>> couldn't find a proper solution for it yet. >>> >>> Thanks, >>> Jerad >>> -- >>> *Jerad Rutnam* >>> *Software Engineer - UI* >>> >>> WSO2 Inc. >>> lean | enterprise | middleware >>> M : +94 77 959 1609 | E : [email protected] | W : www.wso2.com >>> >> >> >> >> -- >> *Jerad Rutnam* >> *Software Engineer - UI* >> >> WSO2 Inc. >> lean | enterprise | middleware >> M : +94 77 959 1609 | E : [email protected] | W : www.wso2.com >> > > > > -- > *Jerad Rutnam* > *Software Engineer* > > WSO2 Inc. > lean | enterprise | middleware > M : +94 77 959 1609 | E : [email protected] | W : www.wso2.com > -- *Jerad Rutnam* *Software Engineer* WSO2 Inc. lean | enterprise | middleware M : +94 77 959 1609 | E : [email protected] | W : www.wso2.com
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
